vue-simple-tab-switch

A simple vue dynamic switch tab

Notice

Not support IE 不支持IE浏览器

Example

Demo

Run npm run dev or yarn dev

运行 npm run dev or yarn dev

Installation

install with NPM

npm install vue-simple-tab-switch --save

Import

import VueTabSwitch from 'vue-simple-tab-switch'

new Vue({
    components: {VueTabSwitch}
})

Usage

In template

  <vue-tab-switch 
    :tabs="datas2">
  </vue-tab-switch>
  
  <vue-tab-switch
    :tabs="datas" 
    :textActiveColor="activeColor"
    :textColor="color"
    :lineColor="activeColor"
    @changeTab="changeTab">
  </vue-tab-switch>

export default {
  data() {
    return {
      activeColor: '#409eff',
      color: '#c0c4cc',
      datas: [
        {text: '推荐推荐', value: 1},{text: '军事', value: 1},         {text: '历史', value: 1},{text: '教育', value: 1},
        {text: '推荐', value: 1},{text: '军事军事', value: 1},{text: '历史', value: 1},{text: '教育', value: 1},
        {text: '推荐', value: 1},{text: '军事', value: 1},{text: '历史历史', value: 1},{text: '教育', value: 1},
        {text: '推荐', value: 1},{text: '军事', value: 1},{text: '历史', value: 1},{text: '教育', value: 1},
      ],
      datas2: [
        {text: '新闻', value: 1},{text: '教育', value: 1},{text: '历史', value: 1},{text: '科学', value: 1}
      ]
    };
  },
  methods:{
    changeTab : function(res) {
      console.log(res);
    }
  }
}

Parameter | Explanation ----|---- tabs | tab data 导航栏数据集 textActiveColor| actived text color 导航栏选中和触发高亮色 textColor | default text color 导航栏默认颜色 lineColor | line color 下标线的颜色