vue-simple-tab-switch

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);
    }
  }
}