Tab 选项卡

Props

tab

参数 说明 类型 默认值
line-width 可选,边框大小 Number 3
active-color 可选,高亮文字的颜色和线条颜色 String #04be02
default-color 可选,默认文字的颜色 String #666
animate 可选,是否使用动画 Boolean true
index 可选,选中tab的index Number 0
v-model index的双向绑定,不要和index一起用 Number 0

tab Events

名字 参数 描述
on-index-change index tab选中

tab-item

参数 说明 类型 默认值
selected 是否高亮 Boolean false

Demo

<template>
<tab>
  <tab-item :selected="demo1 === '已发货'" @click="demo1 = '已发货'">已发货</tab-item>
  <tab-item :selected="demo1 === '未发货'" @click="demo1 = '未发货'">未发货</tab-item>
  <tab-item :selected="demo1 === '全部订单'" @click="demo1 = '全部订单'">全部订单</tab-item>
</tab>
</template>

<script>
export default {
  data () {
    return {
      demo1: '未发货'
    }
  }
}
</script>

更简洁的粟子

<template>
<tab :line-width="2" active-color="#fc378c">
  <tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item"><<item>></tab-item>
</tab>
</template>

<script>
export default {
  data () {
    return {
      demo2: '美食',
      list2: ['精选', '美食', '电影', '酒店', '外卖']
    }
  }
}
</script>

禁用滑动动画

<template>
<tab :line-width="1" :animate="false">
  <tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item"><<item>></tab-item>
</tab>
</template>

<script>
export default {
  data () {
    return {
      demo2: '美食',
      list2: ['精选', '美食', '电影', '酒店', '外卖']
    }
  }
}
</script>

更多的demo请手机访问 http://jh-wong.com/vux2 进行查看。

results matching ""

    No results matching ""