58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<template>
|
|
<Defaults v-if="getThemeConfig.layout === 'defaults'" />
|
|
<Classic v-else-if="getThemeConfig.layout === 'classic'" />
|
|
<Transverse v-else-if="getThemeConfig.layout === 'transverse'" />
|
|
<Columns v-else-if="getThemeConfig.layout === 'columns'" />
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, onBeforeMount, onUnmounted, getCurrentInstance } from 'vue';
|
|
import { useStore } from '/@/store/index.ts';
|
|
import { getLocal, setLocal } from '/@/utils/storage.ts';
|
|
import Defaults from '/@/views/layout/main/defaults.vue';
|
|
import Classic from '/@/views/layout/main/classic.vue';
|
|
import Transverse from '/@/views/layout/main/transverse.vue';
|
|
import Columns from '/@/views/layout/main/columns.vue';
|
|
export default {
|
|
name: 'layout',
|
|
components: { Defaults, Classic, Transverse, Columns },
|
|
setup() {
|
|
const { proxy } = getCurrentInstance() as any;
|
|
const store = useStore();
|
|
// 获取布局配置信息
|
|
const getThemeConfig = computed(() => {
|
|
return store.state.themeConfig.themeConfig;
|
|
});
|
|
// 窗口大小改变时(适配移动端)
|
|
const onLayoutResize = () => {
|
|
if (!getLocal('oldLayout')) setLocal('oldLayout', getThemeConfig.value.layout);
|
|
const clientWidth = document.body.clientWidth;
|
|
if (clientWidth < 1000) {
|
|
getThemeConfig.value.isCollapse = false;
|
|
proxy.mittBus.emit('layoutMobileResize', {
|
|
layout: 'defaults',
|
|
clientWidth,
|
|
});
|
|
} else {
|
|
proxy.mittBus.emit('layoutMobileResize', {
|
|
layout: getLocal('oldLayout') ? getLocal('oldLayout') : 'defaults',
|
|
clientWidth,
|
|
});
|
|
}
|
|
};
|
|
// 页面加载前
|
|
onBeforeMount(() => {
|
|
onLayoutResize();
|
|
window.addEventListener('resize', onLayoutResize);
|
|
});
|
|
// 页面卸载时
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', onLayoutResize);
|
|
});
|
|
return {
|
|
getThemeConfig,
|
|
};
|
|
},
|
|
};
|
|
</script>
|