首页 > > 网页制作 > css >

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

2019-01-23 07:39:53来源：博客园阅读 ()

首先看最终效果图：

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

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

原文链接:https://www.cnblogs.com/leileilei/p/10303549.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有