sf-tab.vue
v0.1.4
Published
<!-- 该 README.md 根据 api.yaml 和 docs/*.md 自动生成,为了方便在 GitHub 和 NPM 上查阅。如需修改,请查看源文件 -->
Downloads
8
Readme
SfTab sf标签页
导航
分隔内容上有关联但属于不同类别的数据集合。
示例
基本用法
<sf-tab v-model="tabActive" :list="list" @change="changeTab"></sf-tab>
import SfTab from 'sf-tab.vue'
Vue.use(SfTab)
export default {
data() {
return {
tabActive:1,
list: [
{ id: 1, name: 'Tab-A' },
{ id: 2, name: 'Tab-B' },
{ id: 3, name: 'Tab-C' },
{ id: 4, name: 'Tab-D' },
],
}
},
methods: {
changeTab(val) {
console.log(val)
},
},
}
定制主题样式
:root {
--color-primary: #E6A23C;
}
API
Props/Attrs
| Prop/Attr | Type | Options | Default | Description |
| --------- | ---- | ------- | ------- | ----------- |
| v-model | number|string | | 0
| 当前高亮显示内容对应的id |
| list | Array<{id,name}> | | []
| id是tab的唯一值,用来匹配选中的标签页,name 则是tab列表上每个标签显示的名称 |
Events
@change
修改时触发
| Param | Type | Description | | ----- | ---- | ----------- | | $event.param | number | 点击的标签页对应的id |