attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: aside补充-滚动条宽度调整以及左侧布局调整

Browse Source
This commit is contained in:
wf 2024-04-02 20:37:56 +08:00
parent 69fe08d773
commit c25c76edad
2 changed files with 34 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.husky/_/.gitignore vendored
View File

@ -1 +0,0 @@
*

80
src/layout/components/Aside/index.vue
View File

@ -1,66 +1,49 @@
<template>
<a-layout-sider collapsible breakpoint="xl" @collapse="onCollapse">
<div class="aside">
<div class="logo_head">
<img :src="Logo" class="logo" />
<span class="logo_title" v-if="!collapse">dc admin</span>
<span class="logo_title" v-if="!collapsed">dc admin</span>
</div>
<a-scrollbar outer-class="aside_scroll">
<a-menu :default-open-keys="['0']" :default-selected-keys="['0_2']" breakpoint="xl" :collapsed="collapse">
<a-sub-menu key="0">
<template #icon><icon-apps></icon-apps></template>
<template #title>Navigation 1</template>
<a-menu-item key="0_0">Menu 1</a-menu-item>
<a-menu-item key="0_1">Menu 2</a-menu-item>
<a-menu-item key="0_2">Menu 3</a-menu-item>
<a-menu-item key="0_3">Menu 4</a-menu-item>
</a-sub-menu>
<a-sub-menu key="1">
<template #icon><icon-bug></icon-bug></template>
<template #title>Navigation 2</template>
<a-menu-item key="1_0">Menu 1</a-menu-item>
<a-menu-item key="1_1">Menu 2</a-menu-item>
<a-menu-item key="1_2">Menu 3</a-menu-item>
</a-sub-menu>
<a-sub-menu key="2">
<template #icon><icon-bulb></icon-bulb></template>
<template #title>Navigation 3</template>
<a-menu-item key="2_0">Menu 1</a-menu-item>
<a-menu-item key="2_1">Menu 2</a-menu-item>
<a-sub-menu key="2_2" title="Navigation 4">
<a-menu-item key="2_2_0">Menu 1</a-menu-item>
<a-menu-item key="2_2_1">Menu 2</a-menu-item>
<a-layout-sider :collapsed="collapsed" breakpoint="xl" class="layout_side" :width="220">
<a-scrollbar style="height: 100%; overflow: auto" outer-class="scrollbar">
<a-menu show-collapse-button @collapse="onCollapse">
<a-menu-item key="0_0_0" data-obj="1">Menu 1</a-menu-item>
<a-sub-menu :key="item" v-for="item in 20">
<template #icon><icon-apps></icon-apps></template>
<template #title>Navigation 1</template>
<a-menu-item key="0_0">Menu 1</a-menu-item>
<a-menu-item key="0_1">Menu 2</a-menu-item>
<a-menu-item key="0_2" disabled>Menu 3</a-menu-item>
</a-sub-menu>
</a-sub-menu>
</a-menu>
</a-scrollbar>
</a-layout-sider>
</a-menu>
</a-scrollbar>
</a-layout-sider>
</div>
</template>
<script setup lang="ts">
import Logo from "@/assets/img/logo.jpg";
import { Message } from "@arco-design/web-vue";
const collapse = ref<boolean>(false);
const onCollapse = (val: boolean, type: string) => {
console.log("收缩", val, type);
collapse.value = val;
const content = type === "responsive" ? "触发响应式收缩" : "点击触发收缩";
Message.info({
content,
duration: 2000
});
const collapsed = ref<boolean>(false);
const onCollapse = (type: boolean) => {
collapsed.value = type;
};
</script>
<style lang="scss" scoped>
.aside {
height: 100vh;
}
.logo_head {
height: 60px;
box-shadow: inset 0 0 0 1px red;
display: flex;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
border-bottom: $border-1 solid $color-border-1;
.logo {
width: 50px;
width: 30px;
}
.logo_title {
font-weight: bold;
@ -68,9 +51,14 @@ const onCollapse = (val: boolean, type: string) => {
}
}
.aside_scroll {
width: 100%;
.layout_side {
height: calc(100% - 60px);
box-shadow: inset 0 0 0 1px black;
}
.scrollbar {
height: 100%;
}
:deep(.arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar) {
width: 4px;
margin-left: 8px;
}
</style>