时间:2021-05-26
这个主题,早在一年前就已经创建,也写了一些内容,碍于在应用上体验始终不够完美,一直只存着草稿。
经过多个平台实践,多次迭代,一些功能加了又减了,最后还是回归了最精简的版本,已适用于大部分的场景,若有需要,可自行扩展。
关键逻辑
核心代码
定义 vuex 的跨页变量(store/index.js)
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { worktab: { list: [ { name: 'my', tabname: '主页', path: '/page/my' } ], current: { name: 'my', tabname: '主页', path: '/page/my' } }, closingPage: '' }, mutations: { worktabRemove (state, p) { // 关闭标签 let ind = state.worktab.list.findIndex(s => s.name === p) if (ind > -1) { // 清理 keep alive - start state.closingPage = state.worktab.list[ind].name // 清理 keep alive - end state.worktab.list.splice(ind, 1) } if (p === state.worktab.current.name) { // 是当前页,返回上一页 router.back() } }, worktabRoute (state, p) { let ind = state.worktab.list.findIndex(s => s.name === p.to.name) if (ind > -1) { // 标签已存在 state.worktab.current = state.worktab.list[ind] } else { // 标签不存在,现在新建 state.worktab.list.push(p.to) state.worktab.current = p.to } state.closingPage = '' } }, actions: { worktabRemove ({commit}, p) { commit('worktabRemove', p) }, worktabRoute ({commit}, p) { commit('worktabRoute', p) } }, strict: debug })定义 worktab 标签栏组件,在主容器引用
<template> <div class="cp-worktab"> <el-tabs v-model="activeTab" type="card" @tab-remove="removeTab" @tab-click="clickTab"> <el-tab-pane v-for="t in worktabs" :key="t.name" :label="t.tabname" :name="t.name" :closable="t.name !== 'my'" > </el-tab-pane> </el-tabs> </div> </template> <script> export default { created () { // 进来不是主页时等list加载后再更新一次current setTimeout(() => { this.activeTab = this.$store.state.worktab.current.name }, 500) }, watch: { '$store.state.worktab.current' (tab) { this.activeTab = tab.name } }, computed: { worktabs () { return this.$store.state.worktab.list } }, data () { return { activeTab: 'name' } }, methods: { clickTab (tab) { this.$router.push(this.worktabs[1 * tab.index].path) }, removeTab (name) { this.$store.dispatch('worktabRemove', name) } } } </script>路由控制通过beforeEach来更新标签信息
import Vue from 'vue' import VueRouter from 'vue-router' import store from '@/store' import Page from '../components/console/Page.vue' import My from '../components/console/My.vue' Vue.use(VueRouter) // 关联路由与组件 const routes = [ { name: 'root', path: '/' }, { path: '/page', component: Page, children: [ { name: 'my', path: 'my', component: My, meta: { tabname: '个人主页' } } ] } ] // 创建路由器 const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { next() store.dispatch('worktabRoute', { to: { name: to.name ? to.name : '', tabname: (to.meta && to.meta.tabname) ? to.meta.tabname : '', path: to.path }, from: { name: from.name ? from.name : '', tabname: (from.meta && from.meta.tabname) ? from.meta.tabname : '', path: from.path } }) return }) export default router主容器通过 closingPage 变量来及时清理关闭页面的缓存
<template> <div> <cp-worktab></cp-worktab> <div class="cp-content"> <keep-alive :exclude="closingPage"> <router-view></router-view> </keep-alive> </div> </div> </template> <script> import Worktab from '../module/Worktab' export default { components: { cpWorktab: Worktab }, data () { return {} }, computed: { closingPage () { return this.$store.state.closingPage } } } </script>总结
以上所述是小编给大家介绍的Vue + Elementui实现多标签页共存的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
现在好多应用场景里会有一些需要给文章打标签等类似的操作,之前jquery用户是使用taginput来实现,使用VUE以后elementui有一个组件非常简单就是
Vue+ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下1、安装vue-pdfnpminstall--savevue-pdf2、
如下所示:最近在学习vue,并用vue+vue-router+axios+elementUI做了一个pos收银系统的前端页面,但是中间遇到methods里的方法
前言elementui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染。elementui表格中有一个功能是展开
用过Elementui库的童鞋肯定知道组件,简单、好用、可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时