hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.01.13:新增布局配置分类背景风格切换'

Browse Source
This commit is contained in:
lyt 2021-01-13 17:32:59 +08:00
parent d16e6c9075
commit 5a57e37578
4 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
vue-admin-wonderful-next/src/store/index.ts
View File

@ -37,6 +37,7 @@ export interface RootStateTypes {
wartermarkText: string,
tagsStyle: string,
animation: string,
columnsAsideStyle: string,
layout: string
}
}

1
vue-admin-wonderful-next/src/utils/themeConfig.ts
View File

@ -34,5 +34,6 @@ export default {
wartermarkText: 'small@小柒',
tagsStyle: 'tagsStyleOne',
animation: 'slideRight',
columnsAsideStyle: 'columnsRound',
layout: 'defaults'
}

30
vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue
View File

@ -21,19 +21,21 @@
</template>
</div>
</li>
<div class="layout-columns-aside-active" ref="columnsAsideActiveRef"></div>
<div ref="columnsAsideActiveRef" :class="setColumnsAsideStyle"></div>
</ul>
</el-scrollbar>
</div>
</template>
<script lang="ts">
import { reactive, toRefs, ref } from "vue";
import { reactive, toRefs, ref, computed } from "vue";
import { useStore } from "/@/store/index.ts";
export default {
name: "layoutColumnsAside",
setup() {
const columnsAsideOffsetTopRefs = ref([]);
const columnsAsideActiveRef = ref();
const store = useStore();
const state = reactive({
columnsAsideList: [
{
@ -67,18 +69,31 @@ export default {
},
],
liIndex: 0,
difference: 0,
});
// 设置高亮样式
const setColumnsAsideStyle = computed(() => {
let { columnsAsideStyle } = store.state.themeConfig;
columnsAsideStyle === "columnsRound"
? (state.difference = 3)
: (state.difference = 0);
if (columnsAsideStyle === "columnsRound")
return "layout-columns-round-active";
else if (columnsAsideStyle === "columnsCard")
return "layout-columns-card-active";
});
// 设置高亮动态位置
const onColumnsAsideDown = (v: Object, k: number) => {
state.liIndex = k;
columnsAsideActiveRef.value.style.top = `${
columnsAsideOffsetTopRefs.value[k].offsetTop + 3
columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference
}px`;
};
return {
columnsAsideOffsetTopRefs,
columnsAsideActiveRef,
onColumnsAsideDown,
setColumnsAsideStyle,
...toRefs(state),
};
},
@ -113,7 +128,7 @@ export default {
color: #ffffff;
transition: 0.3s ease-in-out;
}
.layout-columns-aside-active {
.layout-columns-round-active {
background: var(--color-primary);
color: #ffffff;
position: absolute;
@ -126,6 +141,13 @@ export default {
transition: 0.3s ease-in-out;
border-radius: 5px;
}
.layout-columns-card-active {
@extend .layout-columns-round-active;
top: 0;
height: 50px;
width: 100%;
border-radius: 0;
}
}
}
</style>

11
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
View File

@ -218,7 +218,7 @@
</el-select>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15 mb27">
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">主页面切换动画</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="mini" style="width:90px;">
@ -228,6 +228,15 @@
</el-select>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15 mb27">
<div class="layout-breadcrumb-seting-bar-flex-label">分栏高亮风格</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-select v-model="getThemeConfig.columnsAsideStyle" placeholder="请选择" size="mini" style="width:90px;">
<el-option label="圆角" value="columnsRound"></el-option>
<el-option label="卡片" value="columnsCard"></el-option>
</el-select>
</div>
</div>
<!-- 布局切换 -->
<el-divider content-position="left">布局切换</el-divider>