基础用法
Tabs 标签的类型
通过设置type
来改变按钮尺寸,四个尺寸,非别是default
(可以不设置)、block
、button-bg
、button
导航样式
通过设置nav
来改变成导航样式,默认的导航样式不能满足设计需求的,可以在各自系统各自调整
Tabs 标签的属性
属性名 | 说明 | 类型 | 默认值 |
---|
model-value / v-model | 绑定值,选中选项的value | 'String'| 'Number' | |
list | Tabs的选项列表,格式规范{label: '', value: ''} | Array | — |
type | Tabs 标签类型 | 'default'| 'block'| 'button-bg'| 'button' | default |
nav | 顶部导航样式 | Boolean | — |
beforeLeave | 切换标签之前的钩子函数, 若返回 false 或者返回被 reject 的 Promise,则阻止切换。 | Function(value, index, item),其中value:选中的值,index:选中的索引,item:选中的原始对象 | — |
Tabs 标签的事件
事件名 | 说明 | 类型 |
---|
click | 点击一个选项触发 | Function(value,index,item);value:点击的value,index:点击的索引,item:点击的原始值 |
change | 选中的选项发生改变时触发 | Function(value,index,item);value:选项的value,index:选项的索引,item:选项的原始值 |
输入框 插槽
插槽名 | 说明 |
---|
- | 默认的标签每项显示的插槽,参数为 { item, index } |
Tabs 标签 Exposes
属性名 | 说明 | 类型 |
---|
ref | Tabs html 元素 | Ref<HTMLButtonElement> |