mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
196 lines
7.7 KiB
Markdown
196 lines
7.7 KiB
Markdown
---
|
||
pageClass: comp-page-class
|
||
---
|
||
# Tabs 标签页
|
||
选项卡切换组件。
|
||
|
||
## 概述
|
||
选项卡切换组件，常用于平级区域大块内容的的收纳和展现。
|
||
|
||
## 代码示例
|
||
<ClientOnly>
|
||
<row>
|
||
<cell span="12" class="pr-20">
|
||
<componetTemplate title="基础用法" template="ui/templates/tab/1.html">
|
||
<template v-slot:demo>
|
||
<Tabs v-model="value">
|
||
<Tab label="标签一">
|
||
<p>1</p>
|
||
</Tab>
|
||
<Tab label="标签二">
|
||
<p>2</p>
|
||
</Tab>
|
||
<Tab label="标签三">
|
||
<p>3</p>
|
||
</Tab>
|
||
</Tabs>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>Tabs的value值或者说v-modal值表示Tabs当前激活项。</p>
|
||
<p>Tab的name属性默认是在Tabs的中index，从1开始。</p>
|
||
<p>Tab的name等于Tabs的value值，则激活此Tab</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="卡片类型" template="ui/templates/tab/2.html">
|
||
<template v-slot:demo>
|
||
<Tabs type="card">
|
||
<Tab label="标签一">
|
||
<p>1</p>
|
||
</Tab>
|
||
<Tab label="标签二">
|
||
<p>2</p>
|
||
</Tab>
|
||
<Tab label="标签三">
|
||
<p>3</p>
|
||
</Tab>
|
||
</Tabs>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>设置type为card。</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="其他参数" template="ui/templates/tab/3.html">
|
||
<template v-slot:demo>
|
||
<Tabs value="android">
|
||
<Tab label="标签一" name="android" icon="md-baseball">
|
||
<p>1</p>
|
||
</Tab>
|
||
<Tab label="标签二" name="apple" icon="md-bed">
|
||
<p>2</p>
|
||
</Tab>
|
||
<Tab label="标签三" name="windows" icon="md-boat" disabled>
|
||
<p>3</p>
|
||
</Tab>
|
||
</Tabs>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>设置Tab的icon，可以在Tab显示一个Icon</p>
|
||
<p>设置Tab的disabled，则禁用该Tab项</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
<cell span="12" class="pl-20">
|
||
<componetTemplate title="自定义动作 + 可删除 + 滚动" template="ui/templates/tab/4.html">
|
||
<template v-slot:demo>
|
||
<Tabs value="1" closable @on-tab-remove="remove">
|
||
<Tab v-for="(item,index) in arr" :label="'标签' + item" :name="item" :key="index">
|
||
<p>{{item}}</p>
|
||
</Tab>
|
||
<Wb-button type="ghost" slot="action" @click="addItem">增加</Wb-button>
|
||
</Tabs>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>在Tabs添加slot为action的元素显示在Tab的头部最右边</p>
|
||
<p>配置closable，则选项可以被删除。删除时触发on-tab-remove事件，参数为删除项的name</p>
|
||
<p>当选项过多时，自动出现左右切换的按钮</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="拖拽排序" template="ui/templates/tab/5.html">
|
||
<template v-slot:demo>
|
||
<Tabs draggable @on-tab-change="change">
|
||
<Tab label="标签一">
|
||
<p>1</p>
|
||
</Tab>
|
||
<Tab label="标签二">
|
||
<p>2</p>
|
||
</Tab>
|
||
<Tab label="标签三">
|
||
<p>3</p>
|
||
</Tab>
|
||
</Tabs>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>配置draggable，则选项可以被拖拽排序，拖拽后触发on-tab-change事件。</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="自定义标题" template="ui/templates/tab/6.html">
|
||
<template v-slot:demo>
|
||
<Tabs>
|
||
<Tab :label="copm(1)">
|
||
<p>1</p>
|
||
</Tab>
|
||
<Tab :label="copm(2)">
|
||
<p>2</p>
|
||
</Tab>
|
||
<Tab :label="copm(3)">
|
||
<p>3</p>
|
||
</Tab>
|
||
</Tabs>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>传入vue组件实现自定义的标题。</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
</Row>
|
||
</ClientOnly>
|
||
|
||
<script>
|
||
import Vue from 'vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
value: '1',
|
||
value1: 'apple',
|
||
arr: [1, 2, 3],
|
||
copm: function(i){
|
||
return new Vue({
|
||
data: function(){
|
||
return{
|
||
i
|
||
}
|
||
},
|
||
render(h){
|
||
return h("span", {
|
||
}, [`标签${this.i}`])
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
choose(index) {
|
||
this.$Toast('选择第' + index + '个')
|
||
},
|
||
addItem(){
|
||
this.arr.push(this.arr.length + 1);
|
||
},
|
||
remove(){
|
||
console.log(arguments)
|
||
},
|
||
change({from, to }){
|
||
var obj = this.arr[from];
|
||
this.arr.splice(from, 1);
|
||
this.arr.splice(to, 0, obj);
|
||
console.log(this.arr)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
## API
|
||
|
||
### Tabs Props
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| value | 可以使用v-modal, 表示当前激活的是那一项 | String\|Number | 1 |
|
||
| type | 可选值有card, 如果没配置则显示默认样式 | String | |
|
||
| closable | 选项是否可删除 | Boolean | false |
|
||
| draggable | 选项是否可拖拽 | Boolean | false |
|
||
|
||
### Tabs Events
|
||
| 事件名 | 说明 | 返回值 |
|
||
|:----------------|:--------------------------|:-----------------------------------------------------|
|
||
| on-click | tab被点击时触发 | (name) |
|
||
| on-tab-remove | tab被删除时触发 | (name, index) |
|
||
| on-tab-change | 拖拽排序时触发 | ({ from:index, to:index }) |
|
||
|
||
### Tab Props
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| name | 用于标识当前选项卡 | String | null |
|
||
| label | 选项卡头部显示的文案，或者是自定义的组件 | String\|Object | null |
|
||
| icon | 选项卡头部显示的icon | String | null |
|
||
| disabled | 是否禁用该选项卡 | Boolean | false |
|
||
|