热门标签
热门文章
- 1Python爬取Bilibili视频音视频_python抓取b站音频
- 2【Eclipse平台】1Eclipse平台总体概览
- 3python爬虫——爬取快读小说app_番茄小说爬取
- 4第十三届蓝桥杯省赛JavaC组真题——详细答案对照(完整版)_蓝桥杯javac组真题
- 5STM32 (十三) SPI_stm32硬件spi
- 6STM32 PM2.5（GP2Y1014AU0F）空气质量 传感器_gp2y1014 stm32
- 7java stream简介
- 83d人体姿态 2024 笔记_poseformer
- 9C# 通过窗口句柄为指定窗口发送指令（user32.dll,mshtml）_user32 句柄
- 10Flink第一章:环境搭建_flink环境搭建
当前位置: article > 正文
vue-element-template/admin添加多标签(tags)功能和修改tags的背景颜色_修改背景颜色
作者：Gausst松鼠会 | 2024-02-16 05:36:32
赞
踩
修改背景颜色
1.首先从vue-element-admin复制文件到项目
vue-admin-template\src\layout\components\TagsView 文件夹
vue-admin-template\src\store\modules\tagsView.js
- 1
- 2
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'
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
一句话就是把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' //新增
- 1
- 2
- 3
- 4
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
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,
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
7.修改背景颜色
是在\src\layout\components\TagsView/index.vue文件下
具体是在.tags-view-container>.tags-view-wrapper >.tags-view-item>&.active中
最后，各位看官，觉得有用的话动动小手给个赞，蟹蟹
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/91107
推荐阅读
相关标签
