vue elementUI使用tabs与导航栏联动

 更新时间:2019-06-25 03:00:51   作者:佚名   我要评论(0)

不使用tabs标签页时,点击导航菜单,router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件,这就需要使用tabs组件

在sli

不使用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自定义底部导航栏Tabbar的实现代码
  • 写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
  • vue实现导航栏效果(选中状态刷新不消失)
  • vue实现nav导航栏的方法
  • vue router仿天猫底部导航栏功能
  • vue2.0 elementUI制作面包屑导航栏
  • vue使用ElementUI时导航栏默认展开功能的实现
  • 基于vue-cli vue-router搭建底部导航栏移动前端项目
  • VUE 实现滚动监听 导航栏置顶的方法
  • 当vue路由变化时,改变导航栏的样式方法

相关文章

  • 微信小程序开发注意指南和优化实践(小结)

    微信小程序开发注意指南和优化实践(小结)

    前言 转眼间已经参与过我厂好几个小程序的开发了,下面本妹子将开发中的那些注意点和各位小伙伴们分享下,妥妥的干货一枚。 一、WXML 不要换行写,有空格不行
    2019-06-25
  • vue elementUI使用tabs与导航栏联动

    vue elementUI使用tabs与导航栏联动

    不使用tabs标签页时,点击导航菜单,router-view映射相应的组件即可显示页面。但我们想在点击导航栏时在tabs中映射相应的组件,这就需要使用tabs组件 在sli
    2019-06-25
  • 深入浅解正则表达式在Java中的使用

    深入浅解正则表达式在Java中的使用

    介绍 &#8226;正则表达式一般用于字符串匹配, 字符串查找和字符串替换. 别小看它的作用, 在工作学习中灵活运用正则表达式处理字符串能够大幅度提高效率, 编
    2019-06-25
  • 微信小程序实现下拉刷新动画

    微信小程序实现下拉刷新动画

    微信小程序动画之下拉刷新动画的具体代码,供大家参考,具体内容如下 简易的效果 下面放代码: js: var animation = wx.createAnimation({}) var i = 1;
    2019-06-25
  • 还不会正则表达式?赶快看这篇!

    还不会正则表达式?赶快看这篇!

    正则表达式是很多程序员,甚至是一些有了多年经验的开发者薄弱的一项技能。大家都很多时候都会觉得正则表达式难记、难学、难用,但不可否认的是正则表达式是
    2019-06-25
  • 常用JavaScript正则表达式汇编与示例详解

    常用JavaScript正则表达式汇编与示例详解

    1.1 前言 目前收集整理了21个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 I
    2019-06-25
  • 微信小程序实现消息框弹出动画

    微信小程序实现消息框弹出动画

    微信小程序动画之消息框弹出,供大家参考,具体内容如下 上图 js: Page({ data: { showModalStatus: false }, powerDrawer: function(e) { va
    2019-06-25
  • js事件触发操作实例分析

    js事件触发操作实例分析

    本文实例讲述了js事件触发操作。分享给大家供大家参考,具体如下: click包含了(mousedown,mouseup)叫做MouseEvents; keydown,keypress,keyup之流叫做UI
    2019-06-25
  • JavaScript  正则表达式备忘单实例代码

    JavaScript 正则表达式备忘单实例代码

    正则表达式或“regex”用于匹配字符串的各个部分 下面是我创建正则表达式的备忘单。 匹配正则 使用 .test() 方法 let testString = "My test string"; let
    2019-06-25
  • 深入浅析正则表达式 捕获组

    深入浅析正则表达式 捕获组

    捕获组(capturing group)是正则表达式里比较常用,也是比较重要的概念,我个人觉得掌握这部分的知识是非常重要的。 这篇文章内容不会很深入,但是尽量做
    2019-06-25

最新评论