bingyi/vue-next-admin
1
0
Fork 0
mirror of https://gitee.com/lyt-top/vue-next-admin synced 2026-06-07 02:12:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

'admin-21.05.28:布局配置新增其它设置功能'

Browse Source
This commit is contained in:
lyt
2021-05-28 10:40:23 +08:00
parent 103815bac1
commit 0eaf78a849
5 changed files with 79 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/store/modules/themeConfig.js
View File

@ -6,7 +6,7 @@ const themeConfigModule = {
isDrawer: false,
/* 界面设置
------------------------------- */
------------------------------- */
// 是否开启菜单水平折叠效果
isCollapse: false,
// 是否开启菜单手风琴效果
@ -15,7 +15,7 @@ const themeConfigModule = {
isFixedHeader: false,
/* 界面显示
------------------------------- */
------------------------------- */
// 是否开启侧边栏 Logo
isShowLogo: false,
// 是否开启 Breadcrumb
@ -35,17 +35,26 @@ const themeConfigModule = {
// 是否开启色弱模式
isInvert: false,
/* 布局切换
------------------------------- */
// 默认布局，可选值"<defaults|classic|transverse|columns>"，默认 defaults
layout: 'defaults',
/* 其它设置
------------------------------- */
// 默认 Tagsview 风格，可选 1、 tags-style-one，自行扩展：
// 1、需修改 @/views/layout/navBars/breadcrumb/setings.vue `getThemeConfig.tagsStyle` el-option
// 2、需修改 @/views/layout/navBars/tagsView/tagsView.vue 代码最底部注释部分 css 样式
tagsStyle: 'tags-style-one',
// 默认主页面切换动画，可选 1、 slide-right 2、 slide-left 3、 opacitys
animation: 'slide-right',
// 默认分栏高亮风格，可选值"<columns-round|columns-card>"，默认 columns-round
columnsAsideStyle: 'columns-round',
// 默认分栏布局风格，，可选值"<columns-horizontal|columns-vertical>"，默认 columns-vertical
columnsAsideLayout: 'columns-vertical',
/* 布局切换
------------------------------- */
// 默认布局，可选值"<defaults|classic|transverse|columns>"，默认 defaults
layout: 'defaults',
/* 全局网站标题 / 副标题
------------------------------- */
------------------------------- */
// 网站主标题（菜单导航、浏览器当前网页标题）
globalTitle: 'vue-prev-admin',
// 网站副标题（登录页顶部文字）

4
src/views/layout/component/columnsAside.vue
View File

@ -12,7 +12,7 @@
>
<div :class="setColumnsAsidelayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
<i :class="v.meta.icon"></i>
<div class="layout-columns-aside-li-box-title font12">
<div class="font12">
{{
$t(v.meta.title) && $t(v.meta.title).length >= 4
? $t(v.meta.title).substr(0, setColumnsAsidelayout === 'columns-vertical' ? 4 : 3)
@ -23,7 +23,7 @@
<div :class="setColumnsAsidelayout" v-else>
<a :href="v.meta.isLink" target="_blank">
<i :class="v.meta.icon"></i>
<div class="layout-columns-aside-li-box-title font12">
<div class="font12">
{{
$t(v.meta.title) && $t(v.meta.title).length >= 4
? $t(v.meta.title).substr(0, setColumnsAsidelayout === 'columns-vertical' ? 4 : 3)

39
src/views/layout/navBars/breadcrumb/setings.vue
View File

@ -91,6 +91,45 @@
</div>
</div>
<!-- 其它设置 -->
<el-divider content-position="left">{{ $t('message.layout.fiveTitle') }}</el-divider>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveTagsStyle') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
<el-option label="风格1" value="tags-style-one"></el-option>
</el-select>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveAnimation') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
<el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-left" value="slide-left"></el-option>
<el-option label="opacitys" value="opacitys"></el-option>
</el-select>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideStyle') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
<el-option label="圆角" value="columns-round"></el-option>
<el-option label="卡片" value="columns-card"></el-option>
</el-select>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15 mb28">
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideLayout') }}</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select v-model="getThemeConfig.columnsAsideLayout" placeholder="请选择" size="mini" style="width: 90px" @change="setLocalThemeConfig">
<el-option label="水平" value="columns-horizontal"></el-option>
<el-option label="垂直" value="columns-vertical"></el-option>
</el-select>
</div>
</div>
<!-- 布局切换 -->
<el-divider content-position="left">{{ $t('message.layout.sixTitle') }}</el-divider>
<div class="layout-drawer-content-flex">

15
src/views/layout/navBars/tagsView/tagsView.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="layout-navbars-tagsview">
<el-scrollbar ref="scrollbarRef" @wheel.native.prevent="onHandleScroll">
<ul class="layout-navbars-tagsview-ul" ref="tagsUlRef">
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
<li
v-for="(v, k) in tagsViewList"
:key="k"
@ -56,6 +56,10 @@ export default {
getThemeConfig() {
return this.$store.state.themeConfig.themeConfig;
},
// 动态设置 tagsView 风格样式
setTagsStyle() {
return this.$store.state.themeConfig.themeConfig.tagsStyle;
},
},
created() {
// 监听非本页面调用 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部
@ -387,5 +391,14 @@ export default {
& ::-webkit-scrollbar {
display: none !important;
}
// // 风格2
// .tags-style-two {
// }
// // 风格3
// .tags-style-three {
// }
// // 风格4
// .tags-style-four {
// }
}
</style>

9
src/views/layout/routerView/parent.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="h100">
<transition name="slide-right" mode="out-in">
<transition :name="setTransitionName" mode="out-in">
<keep-alive :include="keepAliveNameList">
<router-view :key="refreshRouterViewKey" />
</keep-alive>
@ -19,6 +19,7 @@ export default {
};
},
created() {
// 页面加载前，处理缓存，页面刷新时路由缓存处理
this.keepAliveNameList = this.getKeepAliveNames();
this.bus.$on('onTagsViewRefreshRouterView', (path) => {
if (this.$route.path !== path) return false;
@ -30,6 +31,12 @@ export default {
});
});
},
computed: {
// 设置主界面切换动画
setTransitionName() {
return this.$store.state.themeConfig.themeConfig.animation;
},
},
methods: {
// 获取路由缓存列表（name），默认路由全部缓存
getKeepAliveNames() {