导航栏两个功能(页面最大化,局部刷新)
<template> <div id="app"> <header> <div class="header" v-show="$route.meta.show"> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1"><a> <i class="el-icon-rank" @click='toggleFullScreen'></i></a></el-menu-item> <el-menu-item index="2"><a> <i class="el-icon-refresh" @click='shuaxin'></i></a></el-menu-item> <el-submenu index="3" style='float: right;'> <template slot="title">系统操作</template> <el-menu-item index="3-1" @click="zhuxiao">注销退出</el-menu-item> <el-menu-item index="3-2" @click="zhuxiao">更换账号</el-menu-item> </el-submenu> </el-menu> </div> </header> <aside id="side" v-show="$route.meta.show"> <div id="nav" @click="handleClick"> <!-- <router-link to="/yi">壹壹壹壹壹</router-link> <router-link to="/er">贰贰贰贰贰</router-link> <router-link to="/san">叁叁叁叁叁</router-link> <router-link to="/aaa">肆肆肆肆肆</router-link> <router-link to="/wu">伍伍伍伍伍</router-link> <router-link to="/liu">陆陆陆陆陆</router-link> <router-link to="/qi">嘁嘁嘁嘁嘁</router-link> <router-link to="/ba">叭叭叭叭叭</router-link> <router-link to="/jiu">啾啾啾啾啾</router-link>--> <!-- <router-link to="/aaa">递归</router-link> --> <router-link to="/bbb" tag="a">日志查看</router-link> <router-link to="/ccc" tag="a">用户管理</router-link> </div> </aside> <main> <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit" @tab-click="routeAdd"> <!-- <el-tab-pane :disabled="tabDisabled" :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name"> </el-tab-pane> --> <el-tab-pane v-for="(item, index) in editableTabs" :key="index" :label="item.title" :name="item.name"></el-tab-pane> </el-tabs> <router-view v-if="isRouterAlive" /> </main> </div> </template> <style lang="scss" scoped> ::-webkit-scrollbar { border: none; } * { padding: 0; margin: 0; } header { width: 100%; height: 60px; } aside { position: absolute; height: calc(100% - 75px); width: 200px; #nav { background: rgb(84, 92, 100); height: 100%; border-top: 1px solid #FFF; display: flex; width: 100%; text-align: center; // box-shadow: inset 0 0 200px rgba(0, 0, 0, .4); flex-direction: column; text-align: center; a { line-height: 50px; font-weight: bold; color: rgb(191, 203, 217); &.router-link-exact-active { color: #42b983; background: rgb(5, 14, 48); } } } } main { position: absolute; left: 208px; height: calc(100% - 75px); overflow: auto; width: calc(100% - 216px); } </style> <script> import { removeToken } from '@/utils/auth' export default { data() { return { activeIndex2: '1', isRouterAlive: true, editableTabsValue: 'name2', tabIndex: 1, editableTabs: [{title:"日志查看",name:"/bbb"}], tabDisabled: true } }, watch: { editableTabs() { if (this.editableTabs.length < 2) { this.tabDisabled = true } else { this.tabDisabled = false } }, }, methods: { handleClick(e) { if (e.target.nodeName.toLowerCase() === 'a') { this.editableTabs.map((res) => { console.log(res.title) // console.log(e.target.text.indexOf(res.title) > -1) // console.log(e.target.text) if (e.target.text.indexOf(res.title) > -1) { console.log(123) }else{ let newTabName = ++this.tabIndex + ''; let path = location.pathname var arr = { title: e.target.text, name: path, // content: path } this.editableTabs.push(arr) } }) // if(tit==e.target.text){ // let path = location.pathname // this.$router.push("`${path}`") // }else{ // // // } } }, zhuxiao() { removeToken() this.$router.push({ name: 'login' }); }, handleSelect(key, keyPath) { console.log(key, keyPath); }, shuaxin() {//局部刷新 this.isRouterAlive = false this.$nextTick(function() { this.isRouterAlive = true }) }, handleTabsEdit(targetName, action) { // if (action === 'add') { // let newTabName = ++this.tabIndex + ''; // this.editableTabs.push({ // title: 'New Tab', // name: newTabName, // content: 'New Tab content' // }); // this.editableTabsValue = newTabName; // } if (action === 'remove') { console.log(targetName) this.editableTabs.splice(index,1) let tabs = this.editableTabs; let activeName = this.editableTabsValue; if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { let nextTab = tabs[index + 1] || tabs[index - 1]; if (nextTab) { activeName = nextTab.name; } } }); } this.editableTabsValue = activeName; this.editableTabs = tabs.filter(tab => tab.name !== targetName); } }, routeAdd(tab, event) { // console.log(tab) var rou = tab.name console.log(rou) this.$router.push("`${rou}`") }, toggleFullScreen() {//页面最大化 if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.cancelFullScreen) { document.cancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } } }, }, } </script>