tab props

属性	描述	类型	默认值
value	tabindex的默认值	_ number _	0
options	数据列表	array	[]
labelKey	文案的key值，当它为空时，tab的文案会直接取item	string	-
activeColor	选中的颜色	string	rgb(19, 187, 134)
color	默认的颜色	string	#666666
duration	动画时间（ms）	number	300
showMoveLine	是否展示移动线	boolean	true
lineWidth	移动线的宽度，当它为auto时，则是选项宽度的一半	string｜number	auto
lineWidth	移动线的高度	number	3
height	容器的高度	number	44
background	容器的背景色	string	#ffffff
sticky	是否粘性定位	boolean	false
stickyOffsetTop	粘性定位距离顶部的距离	number	0
border	是否显示border	boolean	false

tab events

名称	描述	参数
click	点击事件	result对象包含了当前选中项的data和index
change	change事件	index
input	input事件	index

例子代码

<template>
  <div>
    <div class="items" style="margin-bottom: 400px">
      <p class="item_title">基础用法</p>
      <vill-tab
        v-model="value"
        :options="options"
        labelKey="name"
        @change="handleChange"
        @click="handleClick"
      />
      <p class="item_change">{{value}}</p>
    </div>
    <div class="items" style="margin-bottom: 300px">
      <p class="item_title">sticky</p>
      <vill-tab
        v-model="value1"
        :options="options2"
        :sticky="true"
        :stickyOffsetTop="-15"
        :lineWidth="30"
        :lineHeight="4"
      />
      <p class="item_change" style="height: 400px; background:rgb(19, 187, 134); color: #fff ">{{value1}}</p>
    </div>
    <div class="items" style="padding-bottom: 400px">
      <p class="item_title">自定义</p>
      <vill-tab
        v-model="value2"
        :options="options"
        labelKey="name"
        background="orange"
        color="#ffffff"
        activeColor="#cccccc"
        :border="false"
        :showMoveLine="false"
      />
      <p class="item_change">{{value2}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        name: '全部订单全部订单全部订单'
      }, {
        name: '待收货'
      }, {
        name: '已完成'
      }, {
        name: '售后'
      }],
      options2:[],
      value: 1,
      value1: 0,
      value2: 2
    }
  },
  created() {
    this.getOptions()
  },
  methods: {
    getOptions() {
      setTimeout(() => {
        this.options2 = [
          '苹果',
          '香蕉',
          '葡萄',
          '桃子',
          '哈密瓜'
        ]
      }, 200)
    },

    handleChange(index) {
      console.log('change', index)
    },

    handleClick(result) {
      const { data, index } = result

      console.log('click', data, index)
    }
  }
}
</script>