使用vue封装一个tab栏切换的左侧导航栏的公共组件

  首先看最终效果图：

   

1.compent文件夹里添加tab文件夹，里面创建index.vue index.js index.css

index.vue内的template部份代码如下：

<div>
    <!-- 侧导航左栏 -->
    <div class="tabnav">
        <div style="border: 1px solid rgba(235,236,240,1);margin-left:16px;margin-top: 20px;">
            <div  v-for="(item,index) in tablist" :key="index" @mouseenter="tabchange(item.children,index)" @mouseleave="tabhide()":class="{active:index==isactive}">
                <div class="tableft" >
                    <div class="tabtitle" style="margin-bottom:9px">
                        <a class="tabhref" :href="item.url">{{item.
                            }}</a> 
                    </div>
                    <div class="tabcontent" v-for="item1 in item.children" style="float:left;margin-left:15px">
                        <a class="tablabel" :href="item1.url">{{item1.name}}</a> 
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <!-- 侧导航内容 -->
    <div class="tabs-content" v-if="tabcontentshow" @mouseenter="tabshow()" @mouseleave="tabhide()">
      <div class="tabdetail"  v-for="item in this.tabcontent">
            <h4 class="tablabel"><a class="tabhref" :href="item.url">{{item.name}}</a></h4>
            <div style="display:flex;flex-wrap: wrap;justify-content:space-around;padding-top:8px;">
                <div class="tablabelson" v-for="item1 in item.children">
                    <a class="tabhref tablabelson" :href="item1.url">{{item1.name}}</a>
                </div>
            </div>
      </div>
    </div>
</div>

2.index.vue内的script部份代码如下，试demo的时候可以用假数据看效果：

import axios from '../../plugins/axios.js';
export default {
    name:'tabs',
    data() {
      return {
          tablist:[//自己造的假数据
            //   {tabtitle:"店铺管理",tabhref:'www.baidu.com',tablabel:[
            //       {tablabname:'管理公司信息',tablabherf:'www.baidu1.com'},
            //       {tablabname:'v认证',tablabherf:'www.baidu2.com'},
            //       {tablabname:'test3',tablabherf:'www.baidu3.com'}
            //   ],
            //   tabcontent:[
            //       {title:'管理公司信息',href:'www.baidu.com',detail:[
            //           {detaillab:'管理公司信息',detailhref:'www.baidu1.com'},
            //           {detaillab:'806',detailhref:'www.baidu2.com'}]},
            //       {title:'a&v认证',href:'www.baidu.com',detail:[
            //           {detaillab:'v认证',detailhref:'www.baidu1.com'},
            //           {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]},
            //       {title:'新南方',href:'www.baidu.com',detail:[
            //           {detaillab:'80请问3',detailhref:'www.baidu1.com'},
            //           {detaillab:'803216',detailhref:'www.baidu1.com'},]},
            //       {title:'新杯方',href:'www.baidu.com',detail:[
            //           {detaillab:'80321委屈3',detailhref:'www.baidu1.com'},
            //           {detaillab:'80问问6',detailhref:'www.baidu1.com'},]},
            //       ]
            //   },
            //   {tabtitle:"产品管理",tabhref:'www.baidu1.com',tablabel:[
            //       {tablabname:'发布产品',tablabherf:'www.baidu.com'},
            //       {tablabname:'管理产品',tablabherf:'www.baidu.com'},
            //       {tablabname:'回收站',tablabherf:'www.baidu.com'},
            //       ],
            //   tabcontent:[
            //       {title:'发布产品',href:'www.baidu.com',detail:[
            //           {detaillab:'发布产品',detailhref:'www.baidu1.com'},
            //           {detaillab:'806',detailhref:'www.baidu1.com'},]},
            //       {title:'管理产品',href:'www.baidu.com',detail:[
            //           {detaillab:'管理产品',detailhref:'www.baidu1.com'},
            //           {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]},
            //       {title:'回收站',href:'www.baidu.com',detail:[
            //           {detaillab:'回收站',detailhref:'www.baidu1.com'},
            //           {detaillab:'803216',detailhref:'www.baidu1.com'},]},
            //       {title:'创造性',href:'www.baidu.com',detail:[
            //           {detaillab:'80321委屈3',detailhref:'www.baidu1.com'},
            //           {detaillab:'80问问6',detailhref:'www.baidu1.com'},]},
            //       ]
            //   },
            //   {tabtitle:"案例管理",tabhref:'www.baidu2.com',tablabel:[
            //       {tablabname:'发布案例',tablabherf:'www.baidu.com'},
            //       {tablabname:'管理案例',tablabherf:'www.baidu.com'},
            //       {tablabname:'回收站',tablabherf:'www.baidu.com'},
            //       ],
            //   tabcontent:[
            //       {title:'发布案例',href:'www.baidu.com',detail:[
            //           {detaillab:'发布案例',detailhref:'www.baidu1.com'},
            //           {detaillab:'806',detailhref:'www.baidu1.com'},]},
            //       {title:'管理案例',href:'www.baidu.com',detail:[
            //           {detaillab:'管理案例',detailhref:'www.baidu1.com'},
            //           {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]},
            //       {title:'回收站',href:'www.baidu.com',detail:[
            //           {detaillab:'回收站',detailhref:'www.baidu1.com'},
            //           {detaillab:'803216',detailhref:'www.baidu1.com'},]},
            //       {title:'就如同',href:'www.baidu.com',detail:[
            //           {detaillab:'80321委屈3',detailhref:'www.baidu1.com'},
            //           {detaillab:'80问问6',detailhref:'www.baidu1.com'},]},
            //       ]
            //   },
            //   {tabtitle:"商机&客户中心",tabhref:'www.baidu3.com',tablabel:[
            //       {tablabname:'询盘',tablabherf:'www.baidu.com'},
            //       {tablabname:'设置',tablabherf:'www.baidu.com'},
            //       {tablabname:'test12',tablabherf:'www.baidu.com'},
            //       ],
            //   tabcontent:[
            //       {title:'询盘',href:'www.baidu.com',detail:[
            //           {detaillab:'询盘',detailhref:'www.baidu1.com'},
            //           {detaillab:'806',detailhref:'www.baidu1.com'},]},
            //       {title:'设置',href:'www.baidu.com',detail:[
            //           {detaillab:'设置',detailhref:'www.baidu1.com'},
            //           {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]},
            //       {title:'就好地方',href:'www.baidu.com',detail:[
            //           {detaillab:'80请问3',detailhref:'www.baidu1.com'},
            //           {detaillab:'803216',detailhref:'www.baidu1.com'},]},
            //       {title:'新杯就如同j方',href:'www.baidu.com',detail:[
            //           {detaillab:'80321委屈3',detailhref:'www.baidu1.com'},
            //           {detaillab:'80问问6',detailhref:'www.baidu1.com'},]},
            //       ]
            //   },
            //   {tabtitle:"商家成长",tabhref:'www.baidu4.com',tablabel:[
            //       {tablabname:'商学院',tablabherf:'www.baidu.com'},
            //       {tablabname:'test14',tablabherf:'www.baidu.com'},
            //       {tablabname:'test15',tablabherf:'www.baidu.com'},
            //       ],
            //   tabcontent:[
            //       {title:'商学院',href:'www.baidu.com',detail:[
            //           {detaillab:'803',detailhref:'www.baidu1.com'},
            //           {detaillab:'806',detailhref:'www.baidu1.com'},]},
            //       {title:'新西广泛大概方',href:'www.baidu.com',detail:[
            //           {detaillab:'80321',detailhref:'www.baidu1.com'},
            //           {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]},
            //       {title:'新南白大夫本人方',href:'www.baidu.com',detail:[
            //           {detaillab:'80请问3',detailhref:'www.baidu1.com'},
            //           {detaillab:'803216',detailhref:'www.baidu1.com'},]},
            //       {title:'广泛的',href:'www.baidu.com',detail:[
            //           {detaillab:'80321委屈3',detailhref:'www.baidu1.com'},
            //           {detaillab:'80问问6',detailhref:'www.baidu1.com'},]},
            //       ]
            //   },
            //   {tabtitle:"交易管理",tabhref:'www.baidu5.com',tablabel:[
            //       {tablabname:'test16',tablabherf:'www.baidu.com'},
            //       {tablabname:'test17',tablabherf:'www.baidu.com'},
            //       {tablabname:'test18',tablabherf:'www.baidu.com'},
            //       ],
            //   tabcontent:[
            //       {title:'范文芳',href:'www.baidu.com',detail:[
            //           {detaillab:'803',detailhref:'www.baidu1.com'},
            //           {detaillab:'806',detailhref:'www.baidu1.com'},]},
            //       {title:'发生的',href:'www.baidu.com',detail:[
            //           {detaillab:'80321',detailhref:'www.baidu1.com'},
            //           {detaillab:'8321嗯去为06',detailhref:'www.baidu1.com'},]},
            //       {title:'新南五分方',href:'www.baidu.com',detail:[
            //           {detaillab:'80请问3',detailhref:'www.baidu1.com'},
            //           {detaillab:'803216',detailhref:'www.baidu1.com'},]},
            //       {title:'vs发生的的',href:'www.baidu.com',detail:[
            //           {detaillab:'80321委屈3',detailhref:'www.baidu1.com'},
            //           {detaillab:'80问问6',detailhref:'www.baidu1.com'},]},
            //       ]
            //   },
          ],
          tabcontentshow:false,
          tabcontent:'',
          isactive:false,
      };
    },
    methods:{
            // 鼠标移入加入class
        tabshow() {
            this.tabcontentshow = true;
        },
        tabhide() {
            this.tabcontentshow = false;
        },
        tabchange(content,index) {
            this.tabcontentshow = true;
            this.tabcontent = content;
            this.isactive = index;
        },
        //从后端接口读取的侧栏数据
        //getlist(){
           // axios('user/v1/menutree','get').then( res => {
              //  this.tablist = res.data.data;
               // console.log(this.tablist);
           // }), err => {
              //  console.log(err)
            //}
        //},
    },
    created() {
       // this.getlist();
    }
  };

3.index.vue内的style部份代码如下：

@import './index.css';  //引入外联的index.css

4.index.css部份代码：

.tabnav {
    width: 210px;
    position: fixed;
    top: 0;
    bottom: 0;
    margin-top: 64px;
    background:rgba(247,248,250,1);
    overflow: hidden;
    z-index: 99;
}

.tabs-content {
   position: fixed;
   top: 20px;
   left:210px;
   bottom: 0;
   margin-top: 64px;
   width:324px;
   height:360px;
   padding:0 24px;
   float: left;
   z-index: 99;
   background:rgba(247,248,250,1);
   border:1px solid rgba(196,198,207,1);
}

.tableft{
    min-width:180px;
    height:67px;   
    background: #fff;
}

.tableft:hover {
    background:rgba(247,248,250,1);
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.tabtitle {
    text-align: left;
    padding-left: 16px;
    padding-top: 12px;
    font-size:14px;
    font-family:pingfang-sc-medium;
    font-weight:500;
    cursor: pointer;
    color:rgba(51,51,51,1);
}

.tabhref {
    color:rgba(51,51,51,1);
}

.tabhref:hover {
    color: red;
    transition: all 0.5s;
}


.tablabel {
    width:50%;
    font-size:12px;
    font-family:pingfang-sc-medium;
    font-weight:500;
    cursor: pointer;
    text-align: left;
    color:rgba(153,153,153,1);
}

.tablabel:hover {
    color: red;
    transition: all 0.5s;
}

.tablabelson {
    font-size:12px;
    font-family:pingfang-sc-medium;
    font-weight:500;
    text-align: left;
    color:rgba(102,102,102,1);
}

.tabdetail {
    padding-top: 24px;
}

.active {
    border-left: solid rgba(27,191,196,1);
}

5.index.js部份代码如下：

import tabs from './index.vue';
import vue from 'vue'
const tabs = {
    install:function() {
        vue.component('tabs',tabs)
    }
}

export default tabs;

6.再main.js里完成全局注册

import tabs from './components/tab/index'

vue.use(tabs);

 

最后，在app.vue文件里引用

<tabs/>  

至此，侧导航栏就会出现在所有的页面，初次封装，有什么问题的话希望提出指正！