2020-12-25 18:15:04 +08:00
|
|
|
<template>
|
2021-01-10 23:59:43 +08:00
|
|
|
<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'" />
|
|
|
|
<Setings ref="setingsRef" />
|
2020-12-25 18:15:04 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2021-01-10 23:59:43 +08:00
|
|
|
import {
|
|
|
|
computed,
|
|
|
|
ref,
|
|
|
|
getCurrentInstance,
|
|
|
|
onBeforeMount,
|
|
|
|
onUnmounted,
|
|
|
|
} from "vue";
|
|
|
|
import { useStore } from "/@/store/index.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";
|
|
|
|
import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
|
2020-12-25 18:15:04 +08:00
|
|
|
export default {
|
|
|
|
name: "layout",
|
2021-01-10 23:59:43 +08:00
|
|
|
components: { Defaults, Classic, Transverse, Columns, Setings },
|
|
|
|
setup() {
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
const setingsRef = ref();
|
|
|
|
const store = useStore();
|
|
|
|
const getThemeConfig = computed(() => {
|
|
|
|
return store.state.themeConfig;
|
|
|
|
});
|
|
|
|
const openSetingsDrawer = () => {
|
|
|
|
setingsRef.value.openDrawer();
|
|
|
|
};
|
|
|
|
onBeforeMount(() => {
|
|
|
|
proxy.mittBus.on("openSetingsDrawer", () => {
|
|
|
|
openSetingsDrawer();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
|
|
proxy.mittBus.off("openSetingsDrawer", () => {});
|
|
|
|
});
|
|
|
|
return {
|
|
|
|
setingsRef,
|
|
|
|
getThemeConfig,
|
|
|
|
};
|
|
|
|
},
|
2020-12-25 18:15:04 +08:00
|
|
|
};
|
|
|
|
</script>
|