TUI

<template>
  <TsSwitchTabs :tabs="tabList" v-model="activeKey" @change="handleCurrentChange" />
</template>

<script setup lang="ts">

  const activeKey = ref('client');
  const tabList = [
    { name: '子系统配置', key: 'client' },
    { name: '用户配置', key: 'user' },
    { name: 'scope配置', key: 'scope' },
    { name: '角色配置', key: 'role' },
    { name: '菜单配置', key: 'menu' },
    { name: '权限配置', key: 'permission' },
  ];
  const handleCurrentChange = (key: string) => {
    activeKey.value = key;
  };

</script>

<template>
    <TsSwitchTabs :tabs="tabList" v-model="activeKey" variant="card" />
</template>
<script setup lang="ts">
  const activeKey = ref('client');
  const tabList = [
    { name: '子系统配置', key: 'client' },
    { name: '用户配置', key: 'user' },
    { name: 'scope配置', key: 'scope' },
    { name: '角色配置', key: 'role' },
    { name: '菜单配置', key: 'menu' },
    { name: '权限配置', key: 'permission' },
  ];
  const handleCurrentChange = (key: string) => {
    activeKey.value = key;
  };

</script>

<template>
  <TsSwitchTabs :tabs="tabList" v-model="activeKey" @change="handleCurrentChange" />
</template>

<script setup lang="ts">
  const activeKey = ref('client');
  const tabList = [
    { name: '子系统配置', key: 'client' },
    { name: '用户配置', key: 'user' },
    { name: 'scope配置', key: 'scope' },
    { name: '角色配置', key: 'role' },
    { name: '菜单配置', key: 'menu' },
    { name: '权限配置', key: 'permission' },
  ];
  const handleCurrentChange = (key: string) => {
    activeKey.value = key;
  };

</script>

<template>
  <div style="width: 380px; display: flex; flex-direction: column; row-gap: 36px">
    <TsSwitchTabs :tabs="exampleData.expandData[0].tabDisabledList" v-model="disabledKey" layout="scrollable" minWidth="auto"/>
    <TsSwitchTabs :tabs="exampleData.expandData[0].tabDisabledList" v-model="disabledKey" layout="scrollable" variant="card" />
  </div>
</template>

<script setup lang="ts">
  const activeKey = ref('client');
  const tabList = [
    { name: '子系统配置', key: 'client' },
    { name: '用户配置', key: 'user', disabled: true  },
    { name: 'scope配置', key: 'scope'},
    { name: '角色配置', key: 'role' },
    { name: '菜单配置', key: 'menu' },
    { name: '权限配置', key: 'permission' },
  ];
  const handleCurrentChange = (key: string) => {
    activeKey.value = key;
  };
</script>

<template>
  <TsSwitchTabs :tabs="exampleData.expandData[0].tabList" v-model="activeKey" layout="scrollable">
    <template #scope>安全设置</template>
  </TsSwitchTabs>
</template>

<template>
  <TsSwitchTabs :tabs="exampleData.expandData[0].tabList" v-model="activeKey" layout="scrollable" switchEffect="slide" />
</template>