vue-element-templateadmin添加多标签（tags）功能和修改tags。。。
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":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新增三处vue element admin
<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 => ken,
avatar: state => state.user.avatar,
name: state => state.user.name,
roles: state => les,
permissions: state => state.user.permissions,
permission_routes: state => utes,
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中最后，各位看官，觉得有⽤的话动动⼩⼿给个赞，蟹蟹

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。