vue elementUI使用tabs与导航栏联动


Posted in Javascript onJune 21, 2019

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

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

Javascript 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
JS实现吸顶特效
Jan 08 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 #Javascript
vue配置文件实现代理v2版本的方法
Jun 21 #Javascript
微信小程序自定义多列选择器使用详解
Jun 21 #Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 #Javascript
Vue多环境代理配置方法思路详解
Jun 21 #Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 #Javascript
使用express来代理服务的方法
Jun 21 #Javascript
You might like
php中AES加密解密的例子小结
2014/02/18 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
javascript生成大小写字母
2015/07/03 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
化工机械应届生求职信
2013/11/04 职场文书
交通事故检查书范文
2014/01/30 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
中学教师自我鉴定
2014/02/07 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
物理教育专业求职信
2014/06/25 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript