vue-element-template/admin添加多标签(tags)功能和修改tags的背景颜色
1.首先从vue-element-admin复制文件到项目vue-admin-template\src\layout\components\TagsView文件夹vue-admin-template\src\store\modules\tagsView.js2.\src\layout\components\TagsView/index.vue 删除三处<template><div
·
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中
最后,各位看官,觉得有用的话动动小手给个赞,蟹蟹
更多推荐
已为社区贡献3条内容
所有评论(0)