• ButtonTab
    • 安装
    • button-tab
    • 属性
    • button-tab-item
    • 属性
    • 事件
    • 贡献者
    • 发布日志

    ButtonTab

    ButtonTab

    demo 原始链接demo 源码编辑文档组件源码

    button-tab - 图1

    二维码

    button-tab - 图2

    Install

    安装

    局部注册

    全局注册

    1. import { ButtonTab, ButtonTabItem } from 'vux'
    3. export default {
    4.   components: {
    5.     ButtonTab,
    6.     ButtonTabItem
    7.   }
    8. }

    1. // 在入口文件全局引入
    3. import Vue from 'vue'
    4. import { ButtonTab, ButtonTabItem } from 'vux'
    6. Vue.component('button-tab', ButtonTab)
    7. Vue.component('button-tab-item', ButtonTabItem)

    button-tab

    button-tab

    属性

    名字类型默认值说明版本要求
    valuenumber0当前选中索引值，从0开始，使用 v-model 绑定—
    heightnumber30高度值, 单位为像素—

    button-tab-item

    button-tab-item

    属性

    名字类型默认值说明版本要求
    selectedbooleanfalse是否选中—

    事件

    名字参数说明版本要求
    @on-item-click(index)当前按钮点击时触发—

    Variables

    ## 样式变量


    名字默认值说明继承自变量
    @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 元素行高

    贡献者

    贡献者

    该组件(包含文档)迭代次数 15，贡献人数 4
    airylandunclayQiongrong JiangLin Sen

    Changelog

    发布日志

    • 2.7.6 [fix] 修复分割线会消失的bug #2322
    • v2.2.0 [enhance] 更新 1px 边框
    • v2.1.0-rc.46 [feature] 添加更多less变量 #896 @erguotou520
    • v2.0.0 [enhance] 去除 Android 下点击可能出现的蓝色边框