欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue elementUI使用tabs与导航栏联动

程序员文章站 2023-09-08 11:14:44
不使用tabs标签页时,点击导航菜单,router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件,这就需要使用tabs组件 在sl...

不使用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。