sf-tab.vue

SfTab sf标签页

• 示例
  • 基本用法
  • 定制主题样式
• API
  • Props/Attrs
  • Events

导航

分隔内容上有关联但属于不同类别的数据集合。

示例

基本用法

<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