TUI

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

<script setup lang="ts">
import { ref } from 'vue';
import { TsSwitchTabs } from 'tui';

const activeKey = ref('paying');

const tabList = [
  { name: '待支付', key: 'paying' },
  { name: '已支付', key: 'payed' },
  { name: '待发货', key: 'pending' },
  { name: '已发货', key: 'send' },
  { name: '待处理', key: 'process' },
  { name: '已退款', key: 'refund' },
];
</script>

<template>
  <TsSwitchTabs :tabs="tabList" :value="activeValue" @change="handleCurrentChange" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsSwitchTabs } from 'tui';

const activeValue = 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) => {
  activeValue.value = key;
};
</script>

<template>
  <TsSwitchTabs :tabs="tabList" v-model="activeCardKey" variant="card" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsSwitchTabs } from 'tui';

const activeCardKey = ref('paying');

const tabList = [
  { name: '待支付', key: 'paying' },
  { name: '已支付', key: 'payed' },
  { name: '待发货', key: 'pending' },
  { name: '已发货', key: 'send' },
  { name: '待处理', key: 'process' },
  { name: '已退款', key: 'refund' },
];
</script>

<template>
  <div class="component-card-demo-column">
    <TsSwitchTabs :tabs="tabDisabledList" v-model="disabledKey" variant="card" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsSwitchTabs } from 'tui';

const disabledKey = ref('paying');

const tabDisabledList = [
  { name: '待支付', key: 'paying' },
  { name: '已支付', key: 'payed', disabled: true },
  { name: '待发货', key: 'pending' },
  { name: '已发货', key: 'send' },
  { name: '待处理', key: 'process' },
  { name: '已退款', key: 'refund' },
];
</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">
import { ref } from 'vue';
import { TsSwitchTabs } from 'tui';

const disabledKey = ref('paying');

const tabDisabledList = [
  { name: '待支付', key: 'paying' },
  { name: '已支付', key: 'payed', disabled: true },
  { name: '待发货', key: 'pending' },
  { name: '已发货', key: 'send' },
  { name: '待处理', key: 'process' },
  { name: '已退款', key: 'refund' },
];
</script>

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

<script setup lang="ts">
import { ref } from 'vue';
import { TsSwitchTabs } from 'tui';

const activeKey = ref('paying');

const tabList = [
  { name: '待支付', key: 'paying' },
  { name: '已支付', key: 'payed' },
  { name: '待发货', key: 'pending' },
  { name: '已发货', key: 'send' },
  { name: '待处理', key: 'process' },
  { name: '已退款', key: 'refund' },
];
</script>

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

<script setup lang="ts">
import { ref } from 'vue';
import { TsSwitchTabs } from 'tui';

const activeKey = ref('paying');

const tabList = [
  { name: '待支付', key: 'paying' },
  { name: '已支付', key: 'payed' },
  { name: '待发货', key: 'pending' },
  { name: '已发货', key: 'send' },
  { name: '待处理', key: 'process' },
  { name: '已退款', key: 'refund' },
];
</script>