1. 狗万官网酒店 > 狗万官网下载 > vue elementUI利用tabs与导航栏联动_vue.js

          vue elementUI利用tabs与导航栏联动_vue.js

          来源: 2019-08-04 19:43 我来投稿 参与评论
          这篇文章主要为大家详细介绍了vue elementUI利用tabs与导航栏联动,具有原则性的参考价值,感兴趣的同伴们可以参考一下

          不利用tabs标签页时,点击导航菜单,router-view辉映相应的组件即可显示页面。但我们想在点击导航栏时在tabs外方映射相应的组件,这就要求采取tabs组件
          在slider.vue中央击路由后,把目前选择的路由@select利用bus传播去

          <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#eeefef" text-color="#666" active-text-color="#20a0ff" unique-opened router @select="addTab">
          
           <!-- 一级菜单 -->
            <template v-for="item in slidebarData" >
            <el-submenu v-if="item.subs && item.subs.length" :index="item.index" :key="item.index">
             <template slot="title"><i :class="item.icon"></i><span>{{item.title}}</span></template>
          
             <!-- 二级菜单 -->
             <template v-for="itemChild in item.subs">
             <el-submenu v-if="itemChild.subs && itemChild.subs.length" :index="itemChild.index" :key="itemChild.index" class="erji">
              <template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.title}}</span></template>
          
              <!-- 三级菜单 -->
              <el-menu-item v-for="itemChild_Child in itemChild.subs" :index="itemChild_Child.index" :key="itemChild_Child.index">
              <i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.title}}</span>
              </el-menu-item>
             </el-submenu>
          
             <el-menu-item v-else :index="itemChild.index" :key="itemChild.index"><i :class="itemChild.icon"></i><span slot="title">{{itemChild.title}}</span></el-menu-item>
             </template>
            </el-submenu>
          
            <el-menu-item v-else :index="item.index" :key="item.index"><i :class="item.icon"></i><span slot="title">{{item.title}}</span></el-menu-item>
            </template>
          
           </el-menu>

          利用bus把路由信息传播

          import bus from '../common/bus';
          methods: {
           addTab(key,keyPath) {
           console.log(key,keyPath)
           bus.$emit('navPath',keyPath)
           }
          },

          在tabs.vue外方收到

          <template>
           <div id="tabs">
           <el-tabs type="card" v-model="tabsVal" @tab-remove="closeTab" @tab-click="tabclick">
            <el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name" :label="item.title" :closable="item.closable" >
                  <component :is="item.component"></component>
                </el-tab-pane>
           </el-tabs>
           </div>
          </template>
          
          <script>
           import searchFor from '../page/ContentManagement/Class/searchFor.vue';
           import bus from '../common/bus';
           export default {
           data() {
            return {
            inputVisible: false,
            navPath: '',
            tabsVal: "searchFor",
            tabList: [
             {
                  title: '热门搜索',
                  name: 'searchFor',
                  disabled: true,
                  closable: false,
                  component: searchFor
                }
            ]
            }
           },
           methods: {
            closeTab(tag) {//关闭tabs
            var tabListName = []
            for(let i = 0; i < this.tabList.length; i++){
             tabListName[i] = this.tabList[i].name;
            }
            console.log(tabListName)
            this.tabList.splice(tabListName.indexOf(tag), 1);
            this.tabsVal = "searchFor";
            this.$router.push("searchFor");
            },
            tabclick(val) {
            console.log(val)
            this.$router.push(val.name);
            //点击tabs触发路由跳转,到相应路由
            }
           },
           mounted () {
               bus.$on('navPath',(name,val) =>{//拍卖传过来的值
                console.log(name)
                 var titname;
                 if(name[name.length -1] == 'searchFor'){
                  titname = '热门搜索'
                 }else if(name[name.length -1] == 'Courier1'){
                  titname = '套课列表'
                 }else if(name[name.length -1] == 'Courier2'){
                  titname = '小节列表'
                 }else if(name[name.length -1] == 'Courier3'){
                  titname = '套课分享'
                 }
                 if (this.tabList.filter(f => f.name == name[name.length -1]) == 0) {
                  var component = resolve => require([`../page/ContentManagement/${name[0]}/${name[name.length -1]}`], resolve)//合伙人管理
                  this.tabList.push({
                    title: titname,
                    name: name[name.length -1],
                    disabled: false,
                    closable: true,
                    component: component
                  })
                 }
                 this.tabsVal = name[name.length -1]
               });
              }
           }
          </script>
          
          <style scoped>
           #tabs {
           position: fixed;
           right: calc(2vw - 2px);
           top: 100px;
           z-index: 5;
           width: calc(96% - 189px);
           height: 38px;
           background: #f0f0f0;
           border-bottom: 4px solid #ccc;
           border-top: 4px solid #ccc;
           padding-left: 10px;
           }
           
           .el-tag {
           margin: 3px;
           }
           
          </style>

          上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

          义务编辑:狗万官网酒店
           
           
          0% (0)
           
           
          0% (0)
          机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
          地名: 匿名?