vue element Admin - 修改瀏覽器標籤名 + 新增tagView標籤 +固定導航頭部 + 新增側邊欄Logo
1 、修改瀏覽器標籤名稱:
修改瀏覽器標籤名稱在檔案:\src\settings.js
image.png
2 、修改固定頭部Header和側邊欄 Logo:
image.png1)側邊欄檔案在:\src\layout\components\Sidebar\index.vue, Sidebar元件中
image.png2)修改側邊欄Log和標題在檔案:src\layout\components\Sidebar\Logo.vue
image.png
3) 控制showLogo欄位在檔案 \src\settings.js中 【需要修改這個檔案】
fixedHeader:true ==>為true則固定頭部,為false則滾動,
sidebarLogo: true ==>為true則顯示側邊欄logo,為false則隱藏
module.exports = { title: 'Vue Admin Template', /** * @type {boolean} true | false * @description Whether fix the header */ fixedHeader: true, /** * @type {boolean} true | false * @description Whether show the logo in sidebar*/ sidebarLogo: true }
注意:固定頭部除了需要改變fixedHeader:true 屬性值外,還需要在\src\layout\components\AppMain.vue新增樣式,內邊距增高
image.png
樣式程式碼
<style lang="scss" scoped> .app-main { /*50 = navbar */ min-height: calc(100vh - 50px); width: 100%; position: relative; overflow: hidden; } .fixed-header+.app-main{ padding-top: 50px; } .hasTagsView { .app-main { /* 84 = navbar + tags-view = 50 + 34 */ min-height: calc(100vh - 84px); } .fixed-header+.app-main { padding-top: 84px; } } </style> <style lang="scss"> // fix css style bug in open el-dialog .el-popup-parent--hidden { .fixed-header { padding-right: 15px; } } </style>
3 、新增標籤導航欄
文件見:https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html
- 在setting.js中設定變數tagsView為true,控制tagView是否顯示
檔案路徑:src\settings.js
/** * @type {boolean} true | false * @description Whether show the logo in sidebar */ tagsView: true,
- 通過store - setting.js檔案控制變數 tagsView
檔案路徑:src\store\modules\settings.js
新增引入變數
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings const state = { showSettings: showSettings, fixedHeader: fixedHeader, // 控制是否固定導航 sidebarLogo: sidebarLogo, // 控制頭部logo是否顯示 tagsView: tagsView // 控制tagsView導航標籤欄是否顯示 }
3)此步驟可忽略
在store-index.js中暴露settings
檔案路徑:src\store\index.js
import Vue from 'vue' import Vuex from 'vuex' import settings from './modules/settings' Vue.use(Vuex) const store = new Vuex.Store({ modules: { settings }, getters }) export default store
4)拷貝元件tagViews
至檔案路徑:src\layout\components\TagsView\index.vue
image.png
若是無許可權路由則修改檔案:src\layout\components\TagsView\index.vue裡程式碼,因為admin版本是許可權路由,獲取路由方式不一樣,程式碼return this.$router.options.routes
5)新增拷貝狀態管理檔案 store
image.png
5.1)拷貝此檔案
\src\store\modules\tagsView.js
5.2)在getter.js中新增丟擲欄位
檔案路徑:src\store\getters.js
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
image.png
5.3) 引入tagView檔案
檔案路徑:\src\store\index.js
image.png
import Vue from 'vue' import Vuex from 'vuex' import tagsView from './modules/tagsView' Vue.use(Vuex) const store = new Vuex.Store({ modules: { tagsView }, getters }) export default store
以上為引入,下面開始使用
6) 在layout - component - index.js檔案中新增 引入tagViews元件
檔案路徑:src\layout\components\index.js
export { default as TagsView } from './TagsView/index.vue'
7)新增keep-alive快取路由
檔案路徑:@/layout/components/AppMain.vue
<section class="app-main"> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive> </transition> </section>
修改js檔案
computed: { cachedViews() { return this.$store.state.tagsView.cachedViews }, key() { console.log(this.$route.path) return this.$route.path } }
8) 修改index.js檔案
檔案路徑:\src\layout\components\index.js
image.png
export { default as TagsView } from './TagsView/index.vue'
9) 修改layout - index.vue檔案(控制頭部是否固定、tagsview導航標籤
檔案路徑:src\layout\index.vue
image.png<template> <div :class="classObj" class="app-wrapper"> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> <sidebar class="sidebar-container" /> <div class="main-container"> <div :class="{'fixed-header':fixedHeader}"> <navbar /> <tags-view v-if="needTagsView" /> </div> <app-main /> </div> </div> </template> import { Navbar, Sidebar, AppMain, TagsView } from './components' import ResizeMixin from './mixin/ResizeHandler' export default { name: 'Layout', components: { Navbar, Sidebar, AppMain, TagsView }, mixins: [ResizeMixin], computed: { needTagsView() { console.log(this.$store.state.settings.tagsView) return this.$store.state.settings.tagsView // return true }, sidebar() { return this.$store.state.app.sidebar }, device() { return this.$store.state.app.device }, fixedHeader() { return this.$store.state.settings.fixedHeader }, classObj() { return { hideSidebar: !this.sidebar.opened, openSidebar: this.sidebar.opened, withoutAnimation: this.sidebar.withoutAnimation, mobile: this.device === 'mobile' } } },
-
修改原有的dashboard為home(路由裡的名稱及跳轉路徑)
檔案路徑:src\router\index.js
注意:當在宣告路由是 添加了 Affix 屬性,則當前tag會被固定在 tags-view中(不可被刪除)。
新增:affix: true
image.png
10)修改檔案dashboard為home
檔案路徑:tests\unit\components\Breadcrumb.spec.js
轉載連結:https://www.jianshu.com/p/cff91fcfe861