更新记录

1.0.1（2020-12-26）

修复存在西文字符情况下，宽度计算错误的问题——来自热心开发者的修改

1.0.0（2020-09-06）

一个动画比较精美的tabs组件

平台兼容性

一、使用说明

1. 解压下载的压缩包，将组件放在项目的components目录下

2. 引用组件

   <!-- 外面套的这层view，是用来给tabs定位的 -->
   <view class="wyb-tabs">
       <wyb-tabs :tabs="tabs" @change="" />
   </view>

   import wybTabs from '@/components/wyb-tabs/wyb-tabs.vue'
   export default {
       components: {
           wybTabs
       },
       data() {
         return {
             tabs: [{
                 label: '米'
             }, {
                 label: '米哈'
             }, {
                 label: '米哈游'
             }]
         }  
       },
       methods: {
           (e) {
               let label = e.label // 选项卡名
               let index = e.index // 选项卡索引值
           }
       }
   }

3. Demo体验地址：http://m.wybfiles.cn:82（请用手机访问，或用桌面浏览器启动手机调试模式）

4. 如果觉得我的插件还不错，可以下载我的插件的示例集合Demo => 传送门，里面有我全部的插件以及全部插件的示例工程

二、参数说明

1. Props

   参数名	类型	是否必填	默认值	说明	可选值
   tabs	array	是	[]	组件的基础数据，具体格式以及可选参数见下方说明
   scroll	boolean		false	控制选项卡是否滚动	true, false
   bg-color	hexColor, rgbColor		'#fff'	组件的背景色
   font-size	string, number		30	选项卡的字体大小
   height	string, number		80	组件的高度
   current	string, number		0	组件的默认选项
   tabs-padding	string, number		50	两个选项卡之间的间距（仅滚动模式生效）
   active-color	hexColor, rgbColor		'#007aff'	被选中选项卡的颜色
   default-color	hexColor, rgbColor		'#999'	未被选中选项卡的颜色
   active-weight	boolean		true	被选中选项卡的文字是否加粗	true, false
   cus-label	string		'label'	tabs数组元素中，承载“选项卡的文字”属性的key值，具体见下方说明
   show-s-block	boolean		true	是否显示滑块	true, false
   s-block-mode	string		'auto'	滑块宽度的计算模式 fixed：固定宽度 auto：根据文字的宽度自动变化	fixed, auto
   s-block-width	string, number		20	滑块的宽度（仅s-block-mode="fixed"时生效）
   s-block-color	hexColor, rgbColor		同active-color	滑块的颜色，不填时为active-color的颜色
   s-block-type	object		{type: 'line',height: 2,paddingHori:5}	滑块的样式类型，具体格式及可选参数见下方说明	见下方说明
   tab-box-style	object		{}	组件最外层容器的样式，同css样式（驼峰形式：例如font-size要写成fontSize）	同css样式
   z-index	string, number		2000	组件的z-index，同css

2. 参数说明

   (1) tabs

   [{
       label: '米哈',        // 显示的文本
       activeColor: '#0f0', // 被选中时的颜色，可覆盖在HTML标签中传入的颜色，非必有属性
       sBlockColor: '#0f0'  // 滑块颜色，可覆盖在HTML标签中传入的颜色，非必有属性
   }, {
       label: '米哈游'
   }]
   /** 关于activeColor与sBlockColor：
     * 主要用来实现不同选项卡的选中颜色不同效果
     * 非必有属性
     */

   (2) s-block-type

   /** 参数说明：
     * type => 滑块的类型：line (线段)、capsule (胶囊)、rectangle (矩形)
     * height => 线段的高度（顾名思义，仅在type='line'时生效，单位px）
     * paddingVert => 垂直内间距（仅在type='capsule' | 'rectangle'时生效）
     * paddingHori => 水平内间距，或水平附加宽度
     */
   [{
       type: 'line',
       height: 2,
       paddingHori: 5
   }, {
       type: 'capsule',
       paddingVert: 5,
       paddingHori: 10
   }, {
       type: 'rectangle',
       paddingVert: 5,
       paddingHori: 10
   }]

3. Event

   事件名	说明	返回值
   @change	点击选项卡的回调	event={label, index}