1.首先从vue-element-admin复制文件到项目

	vue-admin-template\src\layout\components\TagsView  文件夹
	vue-admin-template\src\store\modules\tagsView.js

2.\src\layout\components\TagsView/index.vue 删除三处

<template>
  <div id="tags-view-container" class="tags-view-container">
    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
      <router-link
        v-for="tag in visitedViews"
        ref="tag"
        :key="tag.path"
        :class="isActive(tag)?'active':''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        tag="span"
        class="tags-view-item"
        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
        @contextmenu.prevent.native="openMenu(tag,$event)"
      >
         <!--****************1.此处把generateTitle删除***************** -->
         // {{ generateTitle(tag.title) }}
          {{ tag.title }}
        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
      </router-link>
    </scroll-pane>
    <!--****************2.此处把li标签内容清空***************** -->
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
      <li @click="refreshSelectedTag(selectedTag)"></li>
      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"></li>
      <li @click="closeOthersTags"></li>
      <li @click="closeAllTags(selectedTag)"></li>
    </ul>
  </div>
</template>

<script>
import ScrollPane from './ScrollPane'
 <!--****************3.此处把generateTitle 注释掉***************** -->
//import { generateTitle } from '@/utils/i18n'
import path from 'path'

一句话就是把generateTitle 有关的全部删掉

3.src/layout/components/index.js新增一处

export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'
export { default as TagsView } from './TagsView'  //新增

4.src/layout/index.vue新增三处

<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 /> <!-- //******** 1新增 -->
      </div>
     
      <app-main />
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain, TagsView} from './components' //2新增TagsView ******
import ResizeMixin from './mixin/ResizeHandler'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView //  *******************3新增
  },
  mixins: [ResizeMixin],

}
</script>

5. src/store/index.js新增两处

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission'
import tagsView from './modules/tagsView'  //1新增
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    permission,
    tagsView  //2新增
  },
  getters
})

export default store

6.src/store/getters.js新增一处

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  roles: state => state.user.roles,
  permissions: state => state.user.permissions,
  permission_routes: state => state.permission.routes,
  
  visitedViews: state => state.tagsView.visitedViews,  //1新增
  // cachedViews: state => state.tagsView.cachedViews,
}

7.修改背景颜色

是在\src\layout\components\TagsView/index.vue文件下
具体是在.tags-view-container>.tags-view-wrapper >.tags-view-item>&.active中

最后,各位看官,觉得有用的话动动小手给个赞,蟹蟹

Logo

前往低代码交流专区

更多推荐