vue的多标签页实现

记录一个vue的后台管理项目-多标签组件的实现:
效果图大概是这样的:
这里写图片描述

点击左侧的菜单栏,会打开相应的标签页,这些标签可以关闭,可以切换;
使用的框架是vue,使用的UI库是element,另外还使用到vue-router和vuex

  • 组成Layout的是:
模块 组件名称
头部 Header
左侧菜单 LeftMenu
标签页栏 TagsView
主视口 AppMain

本文单就TagsView进行笔记记录
TagsView主要功能:
1.生成打开过的路由,对应当前路由的标签是active状态;
2.切换路由;
3.关闭页签;
4.打开的标签过多,超出容器宽的话,在容器上面可以使用滚轮上下切换(本项目的模块是按照业务划分的,由于放置滚轮的容器是与整个多标签组件并无业务关联的,那么滚轮容器是单独拿出来的一个组件,有自己的滚轮事件,留出slot插槽放入TagsView)

对于多标签页来说,每一个标签是一个router-link,而生成这些标签router-link最重要的是浏览过的路由的记录,并且监听着路由的改变;本项目使用了vuex去记录浏览过的路由;

先说说多标签页的vuex配置:

这里写图片描述

  • 在store/modules/下新建tagsview.js,具体的提交方法会在组件中用到的时候详细分析
const tagsview ={
  state:{
    visitedviews:[],//存放所有浏览过的且不重复的路由数据
  },
  mutations:{//ADD_VISITED_VIEWS:(state,view)=>{//打开新页签--添加路由数据的方法      if(state.visitedviews.some(v=>v.path==view.path))return;
      state.visitedviews.push({
        name:view.name,
        path:view.path,
        title:view.meta.title || 'no-title'
      })
    },
    DEL_VISITED_VIEWS:(state,view)=>{//关闭页签--删除路由数据的方法
      for(let [i,v] of state.visitedviews.entries()){
        if(v.path == view.path){
          state.visitedviews.splice(i,1)
          break
        }
      }
    }
  },
  actions:{//调用这里去触发mutations,如何调用?在组件内使用this.$store.dispatch('action中对应名字', 参数)
    addVisitedViews({commit},view){//通过解构赋值得到commit方法
      commit('ADD_VISITED_VIEWS',view)//去触发ADD_VISITED_VIEWS,并传入参数
    },
    delVisitedViews({commit,state,view){//删除数组存放的路由之后,需要再去刷新路由,这是一个异步的过程,需要有回掉函数,所以使用并返回promise对象,也可以让组件在调用的时候接着使用.then的方法
      //commit('DEL_VISITED_VIEWS',view)
      return new Promise((resolve)=>{//resolve方法:未来成功后回掉的方法
        commit('DEL_VISITED_VIEWS',view);
        resolve([...state.visitedviews]);
      })
    }

  }
}
export default tagsview

这个moudle写完了之后,别忘记放在Vuex.Store实例中去

import Vue from 'vue';
import Vuex from 'vuex';
import tagsview from './modules/tagsview.js'
import getters from './getter.js'

Vue.use(Vuex)
const store= new Vuex.Store({
  modules:{
    tagsview
  },
  getters
})

export default store

另外getters.js是这样的:

const getters ={
  visitedviews:state => state.tagsview.visitedviews
}
export default getters

TagsView.vue:

  • 标签页的初始渲染
<template id="">
  <div class="tags-view-container">
    <scroll-panel class="tags-view-wrap">
      <router-link v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path"  class="tags-view-item" :class="isActive(tag)?'active':''">
        {{tag.title}}
         <span class='el-icon-close' @click.prevent.stop="delSelectTag(tag)"></span>
      </router-link>
    </scroll-panel>
  </div>
</template>

scroll-panel :容器组件

visitedViews来自计算属性:

computed:{
    visitedViews(){//store中取值
      return this.$store.state.tagsview.visitedviews
    }
  },

isActive()方法是用来判断页签的路由是否为当前路由

methods:{
    isActive(route){
      return route.path == this.$route.path
    },
  }
  • 打开一个标签页

另外,点击左侧菜单树,或者点击其他的tab页签,会导致路由的改变,那么就需要一个watcher

watch:{
    $route(){
      this.addViewTags();
    }
  },

addViewTags()方法是在路由改变时候触发的,会去提交store中的addVistitedViews方法,该方法会根据state中存放的路由数据来判断新打开的路由之前有没有存放过,如果没有push到数组中去,数组会进行改变

methods:{
    addViewTags(){//路由改变时执行的方法
      if(this.$route.name){
        const route = this.$route
         this.$store.dispatch('addVisitedViews',route);
      }
    },   
  }
  • 关闭一个标签页:
    delSelectTag()方法用来关闭一个标签页,在此会执行提交store中delVisitedViews方法,需要在该方法执行完删除数组中的数据后,再进行更改路由;
methods:{
    delSelectTag(route){//先提交删除数据的方法,数组删除出掉数据后,如果关闭的是当前打开的路由需要将路由改为数组最后一次push进去的路由
      this.$store.dispatch('delVisitedViews',route).then((views)=>{
        if(this.isActive(route)){//只有在关闭当前打开的标签页才会有影响
          let lastView = views.slice(-1)[0]//选取路由数组中的最后一位
          if(lastView){
            this.$router.push(lastView);
          }else{
            this.$router.push('/');
          }
        }
      })
    }
  }
版权声明:本文为connie_0217原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/connie_0217/article/details/79523955

智能推荐

双路快速排序法

快速排序法的优化——双路快速排序 上一节我们自己动手写的一个快速排序的算法,在随机数测试中表现得非常好,然而,我们在用高度有序的数组进行测试的时候,发现快速排序的效率变得异常的低下,比归并排序的效率低得多了,近似退回了O(n^2)的复杂度,这是为什么呢?首先让我们来分析一下归并排序的算法思想,归并排序之所以能够达到O(logn)的复杂度,多亏了递归,递归使得把数组不断的二分...

android问题记录

Error: Cannot fit requested classes in a single dex file (# methods: 80441 > 65536) 解决办法: gradle文件的defaultConfig默认配置里面增加...

ROS机器人Diego 1# 利用人工智能 风格迁移技术拍摄不同画风的视频

风格迁移,就是将一种图片的风格迁移到其他图片上,改变其他图片的风格,很好玩的一个人工自能模型,github上已经有很多实现的方法,本文参考https://github.com/hzy46/fast-neural-style-tensorflow 的算法,利用Diego1#的平台实现实时视频的风格转换,先上两张图看效果: 是不是很酷呢,其实实现方法和上篇博文中的原理是一样的,只是把人工智能的算法包装...

猜你喜欢

数据分析学习总结笔记17:文本分析入门案例实战

文章目录 1 数据准备 2 分词 3 统计词频 4 词云 5 提取特征 6 用sklearn进行训练 1 数据准备 数据样例如下, 数据总量为7.7万+: 本节通过一个实战的例子来展示文本分析的最简单流程。首先设定因变量为原始数据中的"评分"。自变量是"评价内容",这里根据评价内容提取TF-IDF特征。之后,通过评价内容的特征建模预测下整体评分。 以上只是最...

LeetCode 150. 逆波兰表达式求值

题目描述 根据逆波兰表示法,求表达式的值。 有效的运算符包括 +, -, *, / 。每个运算对象可以是整数,也可以是另一个逆波兰表达式。 整数除法只保留整数部分。 给定逆波兰表达式总是有效的。 换句话说,表达式总会得出有效数值且不存在除数为 0 的情况。 示例 1: 输入:[“2”, “1”, “+”, “3&r...

并查集原理及应用

并查集 树形的数据结构,每个集合有其代表节点,代表节点相同的元素属于同一集合。 find:通过查找节点的代表节点,判断节点所属集合。 union:合并两集合,小集合合并到大集合,使用大集合的代表节点。 在find的递归过程中,让路过节点的父节点直接赋值为代表节点,节省下次查找时间,如图所示。 计算岛的个数 遍历二维数组,遇到1时就将所相连的1都改为2,看看遇到多少次1,就是岛的数量。改数时使用回溯...

linux nutch1.0安装配置

1,下载nutch1.0 下载地址:http://archive.apache.org/dist/nutch/,下载这个文件nutch-1.0.tar.gz   2,上传到服务器 上传位置:/home/www/,解压nutch-1.0.tar.gz #tar -xvf nutch-1.0.tar.gz 重命名 #mv nutch-1.0 nutch   3,修改配置文...

如何搭建自己的博客?附加美化

如何搭建自己的blog?附加美化 前言: 之前在腾讯云以学生优惠租了一年的服务器,还买了一年的域名,忽然觉得不能闲置着域名,所以搭建了个博客,过程也遇到了很多的问题,望在此阐述,予以他人帮助,祝好~ 准备工作:使用Xshell连接上Linux服务器,我的是centos系统,方便进行操作。使用Xftp连接上Linux服务器,方便传输文件。 安装apache服务器:yum install httpd ...