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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
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中的时间显示
2007/01/18 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
Python 编码处理-str与Unicode的区别
2016/09/06 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python使用minimax算法实现五子棋
2019/07/29 Python
PyTorch中的Variable变量详解
2020/01/07 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
班级体育活动总结
2014/07/05 职场文书
交流会主持词
2015/07/02 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python