---
url: /components/tabs.md
---
# Tabs 标签页

`EvTabs` 提供两种轻量页签形态：`capsule` 分段胶囊（灰轨道 + 弹性滑块）适合视图切换
（如定价的月付/年付），`underline` 下划线适合内容页签。胶囊滑块以 spring 曲线平滑跟随
激活项；内容切换由消费方根据 `v-model` 自行渲染。不绑定 `v-model` 时组件自持状态
（`default-value` 定初值），复制标签即可交互。支持键盘操作：页签聚焦后用 ←/→ 移动
激活项（自动跳过禁用项、首尾环绕），Home/End 跳到首/尾。

## 基础用法

```vue
<script setup>
import { ref } from 'vue'
const billing = ref('m')
</script>

<template>
  <EvTabs
    v-model="billing"
    :items="[{ label: '月付', value: 'm' }, { label: '年付', value: 'y' }]"
    @change="onBillingChange"
  />
</template>
```

## 下划线变体

```vue
<EvTabs v-model="tab" variant="underline" :items="tabItems" />
```

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前值 | string / number | `''` |
| default-value | 非受控模式的初始值（未绑定 v-model 时生效） | string / number | — |
| items | 页签项 `[{ label, value, icon?, disabled? }]` | array | `[]` |
| variant | 形态 | `'capsule' \| 'underline'` | `'capsule'` |
| size | 尺寸 | `'small' \| 'default' \| 'large'` | `'default'` |

### 事件

| 事件 | 说明 | 参数 |
| --- | --- | --- |
| update:modelValue | 切换时派发 | value |
| change | 切换时派发 | value |