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

我不是女神ヾ 2021-07-25 02:36 398阅读 0赞

1、安装
    	cnpm install -S ly-tab
    
    2、注册
    	import Vue from 'vue';
    	import LyTab from 'ly-tab';
    	
    	Vue.use(LyTab);
    	
    3、使用
        <ly-tab
            v-model="selectedId"  选中的id
            :items="items" 		  栏目内容,数组,items:[{label:'内容'},...]
            :options="options"	  options: {activeColor: '#e9232c'}  设置选中的颜色
    }
            @change="handleChange"  回调函数,第一个参数为当前bar的内容,第二个参数为当前bar的索引
        />

代码示例:

<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>

效果图:  
![在这里插入图片描述][20200813171005201.png_pic_center]

[20200813171005201.png_pic_center]: /images/20210724/044b8ef03d1c4976a0956b30f7cb8bb2.png