163 lines
4.3 KiB
Vue
163 lines
4.3 KiB
Vue
<template>
|
||
<div class="vue-admin-better-wrapper" :class="{ mobile }">
|
||
<component
|
||
:is="'vab-layout-' + theme.layout"
|
||
:collapse="collapse"
|
||
:device="device"
|
||
:fixed-header="theme.fixedHeader"
|
||
:show-tabs="theme.showTabs"
|
||
/>
|
||
<el-backtop target="#app" />
|
||
<!-- 主题组件放到layouts下防止主题切换，导致主题组件重新加载 -->
|
||
<vab-theme-drawer />
|
||
<vab-theme-setting />
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { useSettingsStore } from '@/store/modules/settings'
|
||
|
||
const imports = require.context('./', true, /\.vue$/)
|
||
const Components: any = {}
|
||
imports
|
||
.keys()
|
||
.filter((key) => key !== './index.vue')
|
||
.forEach((key) => {
|
||
Components[key.replace(/(\/|\.|index.vue)/g, '')] =
|
||
imports(key).default
|
||
})
|
||
|
||
export default defineComponent({
|
||
name: 'Layouts',
|
||
components: Components,
|
||
setup() {
|
||
const settingsStore = useSettingsStore()
|
||
const { device, collapse, theme } = storeToRefs(settingsStore)
|
||
const { toggleDevice, foldSideBar, openSideBar, updateTheme } =
|
||
settingsStore
|
||
|
||
const mobile = ref(false)
|
||
let oldLayout = theme.value.layout
|
||
|
||
const resizeBody = () => {
|
||
mobile.value =
|
||
document.body.getBoundingClientRect().width - 1 < 992
|
||
}
|
||
|
||
watch(mobile, (val) => {
|
||
if (val) {
|
||
oldLayout = theme.value.layout
|
||
foldSideBar()
|
||
} else openSideBar()
|
||
|
||
theme.value.layout = val ? 'vertical' : oldLayout
|
||
toggleDevice(val ? 'mobile' : 'desktop')
|
||
})
|
||
|
||
resizeBody()
|
||
updateTheme()
|
||
|
||
const cleanup = useEventListener('resize', () => {
|
||
resizeBody()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
if (mobile) theme.value.layout = oldLayout
|
||
cleanup()
|
||
})
|
||
|
||
return {
|
||
theme,
|
||
device,
|
||
mobile,
|
||
collapse,
|
||
foldSideBar,
|
||
openSideBar,
|
||
toggleDevice,
|
||
}
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.vue-admin-better-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
[class*='vab-layout-'] {
|
||
:deep() {
|
||
.vab-layout-header {
|
||
box-shadow: $base-box-shadow;
|
||
}
|
||
}
|
||
|
||
&.fixed {
|
||
padding-top: $base-nav-height + $base-tabs-height;
|
||
}
|
||
|
||
&.fixed.no-tabs-bar {
|
||
padding-top: $base-nav-height;
|
||
}
|
||
}
|
||
|
||
:deep() {
|
||
.fixed-header {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: $base-z-index - 1;
|
||
width: 100%;
|
||
}
|
||
|
||
.vab-main {
|
||
position: relative;
|
||
width: auto;
|
||
min-height: 100%;
|
||
margin-left: var(--el-left-menu-width);
|
||
|
||
&.is-collapse-main {
|
||
margin-left: $base-left-menu-width-min;
|
||
|
||
.fixed-header {
|
||
width: $base-right-content-width-min;
|
||
}
|
||
}
|
||
|
||
&:not(.is-collapse-main) {
|
||
.fixed-header {
|
||
width: calc(100% - var(--el-left-menu-width));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 手机端开始 */
|
||
&.mobile {
|
||
:deep() {
|
||
.vab-layout-vertical {
|
||
.el-scrollbar.vab-side-bar.is-collapse {
|
||
width: 0;
|
||
}
|
||
|
||
.vab-main {
|
||
.fixed-header {
|
||
width: 100%;
|
||
}
|
||
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
/* 隐藏分页和页码跳转 */
|
||
.el-pager,
|
||
.el-pagination__jump {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 手机端结束 */
|
||
}
|
||
</style>
|