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('/');
          }
        }
      })
    }
  }

vue的多标签页实现

猜你喜欢