ButtonTab 组件使用教程
优质
小牛编辑
134浏览
2023-12-01
安装
import { ButtonTab, ButtonTabItem } from 'vux'
export default {
components: {
ButtonTab,
ButtonTabItem
}
}// 在入口文件全局引入
import Vue from 'vue'
import { ButtonTab, ButtonTabItem } from 'vux'
Vue.component('button-tab', ButtonTab)
Vue.component('button-tab-item', ButtonTabItem)
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| value | number | 0 | 当前选中索引值，从0开始，使用 v-model 绑定 | -- |
| height | number | 30 | 高度值, 单位为像素 | -- |
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| selected | boolean | false | 是否选中 | -- |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-item-click | (index) | 当前按钮点击时触发 | -- |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @button-tab-border-width | 1px | 未被使用 | |
| @button-tab-border-radius | 16px | 圆角边框的半径 | |
| @button-tab-border-color | #04BE02 | 边框的颜色 | @theme-color |
| @button-tab-default-border-color | #04BE02 | 默认状态下圆角边框的颜色 | @button-tab-border-color |
| @button-tab-active-border-color | #04BE02 | 未被使用 | @button-tab-border-color |
| @button-tab-default-background-color | #fdfdfd | 默认状态下的背景颜色 | |
| @button-tab-active-background-color | #04BE02 | 选中状态下的背景颜色 | @theme-color |
| @button-tab-active-font-color | #FFF | 未被使用 | |
| @button-tab-active-text-color | #FFF | 未被使用 | @button-tab-active-font-color |
| @button-tab-default-text-color | #999 | 默认状态下的文本颜色 | |
| @button-tab-height | 30px | 元素高度 | |
| @button-tab-line-height | 31px | 元素行高 |