## Tabs 标签页

### 基础用法

Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 `value` 属性来指定当前选中的标签页。

```html
<template>
  <cl-tabs tabs-value="second" @tab-click="(tab) => $message(`切换到：${tab.label}`)">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  </cl-tabs>
</template>

<!-- tabs-1.vue -->
```

### 切换前校验

配置`is-verify`属性为`true`时，在切换`tab`前会对当前面板内容进行校验，校验失败时会阻止切换操作。

```html
<template>
  <el-form label-width="180px">
    <cl-tabs tabs-value="first" is-verify :before-leave="beforeLeaveHandle">
      <el-tab-pane label="用户基本信息" name="first">
        <template>
          <cl-form-item label="个人姓名">
            <cl-input v-model="data.grxm" name="个人姓名" validate="required" />
          </cl-form-item>
          <cl-form-item label="年龄">
            <cl-input v-model="data.age" name="年龄" validate="required" />
          </cl-form-item>
          <cl-form-item label="性别">
            <cl-input v-model="data.xb" />
          </cl-form-item>
        </template>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        <cl-form-item label="自动打开策略">
          <cl-checkbox
            v-model="data.autoPolicy"
            :options="[
              { key: '1', value: '下一个待办' },
              { key: '2', value: '下一个待阅' },
            ]"
          />
        </cl-form-item>
      </el-tab-pane>
    </cl-tabs>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        data: {
          grxm: "",
          age: "",
          xb: "",
          xgtd: "",
          autoPolicy: "",
        },
      };
    },
    methods: {
      beforeLeaveHandle(name) {
        if(name=='first'){
          this.$message({message: '禁止返回修改用户基本信息', type: 'warning'})
          return false
        }
      }
    }
  };
</script>


<!-- tabs-2.vue -->
```

### Tabs Attributes
| 参数       | 说明     | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| tabsValue  | 选中选项卡的 name  | string   |  —  |  第一个选项卡的 name |
| type     | 风格类型   | string   | card/border-card  |     —    |
| closable  | 标签是否可关闭   | boolean   | — |  false  |
| addable  | 标签是否可增加   | boolean   | — |  false  |
| editable  | 标签是否同时可增加和关闭   | boolean   | — |  false  |
| tab-position  | 选项卡所在位置 | string   |  top/right/bottom/left  |  top |
| stretch  | 标签的宽度是否自撑开 | boolean   |  -  |  false |
| is-verify     | 是否校验 | boolean        | —     | false    |
| before-leave | 切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 | Function(activeName, oldActiveName) | — | — |

### Tabs Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| tab-click  | tab 被选中时触发 | 被选中的标签 tab 实例 |
| tab-remove  | 点击 tab 移除按钮后触发  | 被删除的标签的 name |
| tab-add  | 点击 tabs 的新增按钮后触发  | — |
| edit  | 点击 tabs 的新增按钮或 tab 被关闭后触发  | (targetName, action) |

### Tab-pane Attributes
| 参数       | 说明     | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| label     | 选项卡标题   | string   | — |    —     |
| disabled | 是否禁用 | boolean | — | false |
| name      | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' |
| closable  | 标签是否可关闭   | boolean   | — |  false  |
| lazy  | 标签是否延迟渲染   | boolean   | — |  false  |
