Name Last Update
..
components/zb-tab Loading commit data...
changelog.md Loading commit data...
package.json Loading commit data...
readme.md Loading commit data...

zb-tab tab 切换

微信=》 19550102670 拉进群

友情链接

在线预览点击 —— 企业级、通用型中后台前端解决方案

vue-admin-perfect —— 企业级、通用型中后台前端解决方案(基于vue3.0+TS+Element-Plus 最新版,同时支持电脑,手机,平板)

zb-tab Props 属性

参数 说明 类型 默认值 是否必须
v-model 绑定当前选中标签的标识符 number , string] 0 非必须
data 数组对象 Array [] 必须
height 设置tab高度 string,number 40px --
shrink 是否开启左侧收缩布局 boolean false 非必须
lineWidth 底部条宽度 number , string -- -
lineColor 底部条颜色 string #ee0a24 -
activeStyle 设置选中样式 object {} -
scrollable 菜单是否可以滚动 boolean true -

##3 DropdownItem Events | 参数 | 说明 | 回调参数 | | ------ | ------ | ------ | ------ | ------ |------ | | change | 选项改变导致 value 变化时触发 | item | | click-tab | 点击选项改变导致 value 变化时触发 | item |

使用示例

<zb-tab
  :activeStyle="{
    fontWeight: 'bold',
    transform: 'scale(1.1)'
    }"
  :data="list"
  v-model="active"
 ></zb-tab>

数据格式

list0 = [{
    name: '标签1',
    value: 0,
}, {
    name: '标签2',
    value: 1,
}, {
    name: '标签3',
    value: 2,
}, {
    name: '标签4',
    value: 3,
}]