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.18:新增分栏布局分栏导航菜单可设置水平、垂直布局'

Browse Source
This commit is contained in:
lyt
2021-05-18 16:09:07 +08:00
parent 799f2b06be
commit 8ec374e3b4
5 changed files with 42 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/i18n/lang/en.js
View File

@ -134,6 +134,7 @@ export default {
fiveTagsStyle: 'Tagsview style',
fiveAnimation: 'page animation',
fiveColumnsAsideStyle: 'Column style',
fiveColumnsAsideLayout: 'Column layout',
sixTitle: 'Layout switch',
sixDefaults: 'One',
sixClassic: 'Two',

1
src/i18n/lang/zh-cn.js
View File

@ -134,6 +134,7 @@ export default {
fiveTagsStyle: 'Tagsview 风格',
fiveAnimation: '主页面切换动画',
fiveColumnsAsideStyle: '分栏高亮风格',
fiveColumnsAsideLayout: '分栏布局风格',
sixTitle: '布局切换',
sixDefaults: '默认',
sixClassic: '经典',

1
src/i18n/lang/zh-tw.js
View File

@ -134,6 +134,7 @@ export default {
fiveTagsStyle: 'Tagsview 風格',
fiveAnimation: '主頁面切換動畫',
fiveColumnsAsideStyle: '分欄高亮風格',
fiveColumnsAsideLayout: '分欄佈局風格',
sixTitle: '佈局切換',
sixDefaults: '默認',
sixClassic: '經典',

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

@ -41,6 +41,8 @@ const themeConfigModule = {
layout: 'defaults',
// 默认分栏高亮风格，可选值"<columns-round|columns-card>"，默认 columns-round
columnsAsideStyle: 'columns-round',
// 默认分栏布局风格，，可选值"<columns-horizontal|columns-vertical>"，默认 columns-vertical
columnsAsideLayout: 'columns-vertical',
/* 全局网站标题 / 副标题
------------------------------- */

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

@ -10,17 +10,25 @@
:class="{ 'layout-columns-active': liIndex === k }"
:title="$t(v.meta.title)"
>
<div class="layout-columns-aside-li-box" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
<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">
{{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) : $t(v.meta.title) }}
{{
$t(v.meta.title) && $t(v.meta.title).length >= 4
? $t(v.meta.title).substr(0, setColumnsAsidelayout === 'columns-vertical' ? 4 : 3)
: $t(v.meta.title)
}}
</div>
</div>
<div class="layout-columns-aside-li-box" v-else>
<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">
{{ $t(v.meta.title) && $t(v.meta.title).length >= 4 ? $t(v.meta.title).substr(0, 4) : $t(v.meta.title) }}
{{
$t(v.meta.title) && $t(v.meta.title).length >= 4
? $t(v.meta.title).substr(0, setColumnsAsidelayout === 'columns-vertical' ? 4 : 3)
: $t(v.meta.title)
}}
</div>
</a>
</div>
@ -43,10 +51,14 @@ export default {
};
},
computed: {
// 设置高亮样式
// 设置分栏高亮风格
setColumnsAsideStyle() {
return this.$store.state.themeConfig.themeConfig.columnsAsideStyle;
},
// 设置分栏布局风格
setColumnsAsidelayout() {
return this.$store.state.themeConfig.themeConfig.columnsAsideLayout;
},
},
mounted() {
this.setFilterRoutes();
@ -139,7 +151,7 @@ export default {
<style scoped lang="scss">
.layout-columns-aside {
width: 64px;
width: 70px;
height: 100%;
background: var(--bg-columnsMenuBar);
ul {
@ -153,12 +165,28 @@ export default {
cursor: pointer;
position: relative;
z-index: 1;
.layout-columns-aside-li-box {
.columns-vertical {
margin: auto;
.layout-columns-aside-li-box-title {
.columns-vertical-title {
padding-top: 1px;
}
}
.columns-horizontal {
display: flex;
height: 50px;
width: 100%;
align-items: center;
padding: 0 5px;
i {
margin-right: 3px;
}
a {
display: flex;
.columns-horizontal-title {
padding-top: 1px;
}
}
}
a {
text-decoration: none;
color: var(--bg-columnsMenuBarColor);
@ -175,7 +203,7 @@ export default {
left: 50%;
top: 2px;
height: 50px;
width: 58px;
width: 65px;
transform: translateX(-50%);
z-index: 0;
transition: 0.3s ease-in-out;