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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 生吃大葱的功效与作用有哪些呢
下一篇: vue-自定义组件传值的实例讲解