TUI

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

<script setup lang="ts">

  const activeKey = ref('paying');
  const tabList = [
    { name: '待支付', key: 'paying' },
    { name: '已支付', key: 'payed' },
    { name: '待发货', key: 'pending' },
    { name: '已发货', key: 'send' },
    { name: '待处理', key: 'process' },
    { name: '已退款', key: 'refund' },
  ];
  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('paying');
  const tabList = [
    { name: '待支付', key: 'paying' },
    { name: '已支付', key: 'payed' },
    { name: '待发货', key: 'pending' },
    { name: '已发货', key: 'send' },
    { name: '待处理', key: 'process' },
    { name: '已退款', key: 'refund' },
  ];
  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('paying');
  const tabList = [
    { name: '待支付', key: 'paying' },
    { name: '已支付', key: 'payed' },
    { name: '待发货', key: 'pending' },
    { name: '已发货', key: 'send' },
    { name: '待处理', key: 'process' },
    { name: '已退款', key: 'refund' },
  ];
  const handleCurrentChange = (key: string) => {
    activeKey.value = key;
  };

</script>

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

<script setup lang="ts">
  const activeKey = ref('paying');
  const tabList = [
    { name: '待支付', key: 'paying' },
    { name: '已支付', key: 'payed', disabled: true  },
    { name: '待发货', key: 'pending'},
    { name: '已发货', key: 'send' },
    { name: '待处理', key: 'process' },
    { name: '已退款', key: 'refund' },
  ];
  const handleCurrentChange = (key: string) => {
    activeKey.value = key;
  };
</script>

<template>
  <TsSwitchTabs :tabs="tabList" v-model="activeKey" layout="scrollable">
    <template #pending>安全设置</template>
  </TsSwitchTabs>
</template>

<template>
  <TsSwitchTabs :tabs="tabList" v-model="activeKey" layout="scrollable" switchEffect="slide" />
</template>