点击可移动/滑动栏(Vue)

1、安装
	cnpm install -S ly-tab

2、注册
	import Vue from 'vue';
	import LyTab from 'ly-tab';
	
	Vue.use(LyTab);
	
3、使用
    

代码示例:

<template>
   <div>
        <ly-tab
        v-model="selectedId"
        :items="items"
        :options="options"
        @change="handleChange"
        />

        <router-view></router-view>
   </div>

</template>

<script>
import Vue from 'vue';
import LyTab from 'ly-tab';

Vue.use(LyTab);

export default {
  name:'home',
  data(){
    return{
    selectedId: 0, // 选中的id
    items:[
        {label: '热门'},
        {label: '服饰'},
        {label: '鞋包'},
        {label: '母婴'},
        {label: '百货'},
        {label: '食品'},
        {label: '内衣'},
        {label: '男装'},
        {label: '电器'}
    ],
    options: {
        activeColor: '#e9232c', // 设置选中的颜色
    },
    // 二级路由路径
    subRouteUrl: ['/home/hot', '/home/dress', '/home/box', '/home/mbaby', '/home/general', '/home/food', '/home/shirt', '/home/man', '/home/ele']

    }
  },
  components:{
      
  },
  methods:{
      handleChange(item, index){
        this.$router.replace(this.subRouteUrl[index])
      },
  }

}
</script>

<style scoped>


</style>

效果图: