feat: 可折叠布局
This commit is contained in:
WANGFan
parent
cef8e8dd98
commit
a893345f1e
37
src/components.d.ts
vendored
37
src/components.d.ts
vendored
@ -5,24 +5,25 @@
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module "vue" {
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
RouterLink: (typeof import("vue-router"))["RouterLink"];
|
||||
RouterView: (typeof import("vue-router"))["RouterView"];
|
||||
SBarcodeDraw: (typeof import("./components/s-barcode-draw/index.vue"))["default"];
|
||||
SCodeView: (typeof import("./components/s-code-view/index.vue"))["default"];
|
||||
SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"];
|
||||
SExternalLinkPage: (typeof import("./components/s-external-link-page/index.vue"))["default"];
|
||||
SFullScreen: (typeof import("./components/s-full-screen/index.vue"))["default"];
|
||||
SInternalLinkPage: (typeof import("./components/s-internal-link-page/index.vue"))["default"];
|
||||
SLangProvider: (typeof import("./components/s-lang-provider/index.vue"))["default"];
|
||||
SMainTransition: (typeof import("./components/s-main-transition/index.vue"))["default"];
|
||||
SPinyinPro: (typeof import("./components/s-pinyin-pro/index.vue"))["default"];
|
||||
SQrcodeDraw: (typeof import("./components/s-qrcode-draw/index.vue"))["default"];
|
||||
SRecorderPcm: (typeof import("./components/s-recorder-pcm/index.vue"))["default"];
|
||||
SSelectIcon: (typeof import("./components/s-select-icon/index.vue"))["default"];
|
||||
SSvgAndIcon: (typeof import("./components/s-svg-and-icon/index.vue"))["default"];
|
||||
SSvgIcon: (typeof import("./components/s-svg-icon/index.vue"))["default"];
|
||||
SVerifyCode: (typeof import("./components/s-verify-code/index.vue"))["default"];
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SBarcodeDraw: typeof import('./components/s-barcode-draw/index.vue')['default']
|
||||
SCodeView: typeof import('./components/s-code-view/index.vue')['default']
|
||||
SelectIcon: (typeof import("./components/select-icon/index.vue"))["default"]
|
||||
SExternalLinkPage: typeof import('./components/s-external-link-page/index.vue')['default']
|
||||
SFoldPage: typeof import('./components/s-fold-page/index.vue')['default']
|
||||
SFullPage: typeof import('./components/s-full-page/index.vue')['default']
|
||||
SInternalLinkPage: typeof import('./components/s-internal-link-page/index.vue')['default']
|
||||
SLangProvider: typeof import('./components/s-lang-provider/index.vue')['default']
|
||||
SMainTransition: typeof import('./components/s-main-transition/index.vue')['default']
|
||||
SPinyinPro: typeof import('./components/s-pinyin-pro/index.vue')['default']
|
||||
SQrcodeDraw: typeof import('./components/s-qrcode-draw/index.vue')['default']
|
||||
SRecorderPcm: typeof import('./components/s-recorder-pcm/index.vue')['default']
|
||||
SSelectIcon: typeof import('./components/s-select-icon/index.vue')['default']
|
||||
SSvgAndIcon: typeof import('./components/s-svg-and-icon/index.vue')['default']
|
||||
SSvgIcon: typeof import('./components/s-svg-icon/index.vue')['default']
|
||||
SVerifyCode: typeof import('./components/s-verify-code/index.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
79
src/components/s-fold-page/index.vue
Normal file
79
src/components/s-fold-page/index.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<a-layout class="layout" id="s-fold-page">
|
||||
<a-layout-sider ref="siderContent" class="layout-sider" :collapsed-width="12" :width="width" :collapsed="collapsed">
|
||||
<div class="packup-btn" @click="collapsed = !collapsed">
|
||||
<icon-left v-if="!collapsed" />
|
||||
<icon-right v-else />
|
||||
</div>
|
||||
<div
|
||||
v-show="!collapsed"
|
||||
:style="{
|
||||
padding: siderPadding
|
||||
}"
|
||||
>
|
||||
<slot name="sider"> </slot>
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
<a-layout-content>
|
||||
<div class="content">
|
||||
<slot name="content"> </slot>
|
||||
</div>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const width = defineModel("width", {
|
||||
type: Number,
|
||||
default: 200
|
||||
});
|
||||
const collapsed = ref<boolean>(false);
|
||||
const siderPadding = computed(() => (collapsed.value ? "0px" : "12px"));
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.layout-sider {
|
||||
position: relative;
|
||||
border-right: 1px solid $color-border-2;
|
||||
.packup-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc(-24px / 2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: $color-text-2;
|
||||
background: $color-bg-white;
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
inset 0 0 0 1px $color-border-2,
|
||||
0 0 10px 0 rgb(0 0 0 / 5%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px $color-border-2,
|
||||
0 0 10px 0 rgb(0 0 0 / 5%);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px $color-border-2,
|
||||
0 0 10px 0 rgb(0 0 0 / 5%);
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.1s;
|
||||
&:hover {
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
:deep(.arco-layout-sider-light) {
|
||||
box-shadow: unset;
|
||||
}
|
||||
</style>
|
||||
21
src/views/component/common-layouts/fold-page.vue
Normal file
21
src/views/component/common-layouts/fold-page.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<s-fold-page>
|
||||
<template #sider>
|
||||
<div>左侧</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div>右侧</div>
|
||||
</template>
|
||||
</s-fold-page>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
border: 1px solid $color-border-2;
|
||||
}
|
||||
</style>
|
||||
@ -1,50 +1,36 @@
|
||||
<template>
|
||||
<s-full-screen>
|
||||
<a-layout class="layout">
|
||||
<a-layout-sider class="layout-sider" :collapsed-width="12" :collapsed="collapsed">
|
||||
<div class="packup-btn" @click="collapsed = !collapsed">
|
||||
<icon-left v-if="!collapsed" />
|
||||
<icon-right v-else />
|
||||
<s-full-page>
|
||||
<s-fold-page v-model:width="siderWidth">
|
||||
<template #sider>
|
||||
<a-menu :style="{ width: '100%', height: '100%' }" :selected-keys="[currentMenu]">
|
||||
<a-menu-item v-for="item in menuData" :key="item.id">{{ item.title }}</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="content">
|
||||
<FoldPage v-if="currentMenu == 1" />
|
||||
</div>
|
||||
<div v-show="!collapsed">sider</div>
|
||||
</a-layout-sider>
|
||||
<a-layout-content>Content</a-layout-content>
|
||||
</a-layout>
|
||||
</s-full-screen>
|
||||
</template>
|
||||
</s-fold-page>
|
||||
</s-full-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const collapsed = ref<boolean>(false);
|
||||
import FoldPage from "@/views/component/common-layouts/fold-page.vue";
|
||||
interface MenuData {
|
||||
id: number;
|
||||
title: string;
|
||||
}
|
||||
const siderWidth = ref<number>(250);
|
||||
const menuData = ref<MenuData[]>([{ id: 1, title: "可折叠布局" }]);
|
||||
const currentMenu = ref<number>(1);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
.content {
|
||||
height: 100%;
|
||||
box-shadow: $shadow-border-1;
|
||||
.layout-sider {
|
||||
position: relative;
|
||||
border-right: 1px solid cyan;
|
||||
.packup-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc(-24px / 2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: $color-bg-white;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 0 0 1px $color-border-2;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.1s;
|
||||
&:hover {
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.arco-layout-sider-light) {
|
||||
box-shadow: unset;
|
||||
:deep(.arco-menu-vertical .arco-menu-inner) {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user