70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<Skeleton
|
||
|
|
active
|
||
|
|
:loading="loading">
|
||
|
|
<ns-application/>
|
||
|
|
</Skeleton>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" type="module">
|
||
|
|
import {defineComponent, provide, ref, onUnmounted, onBeforeUnmount} from 'vue';
|
||
|
|
import zhCN from 'ant-design-vue/es/locale/zh_CN';
|
||
|
|
import {useRoute} from 'vue-router';
|
||
|
|
import { Skeleton } from 'ant-design-vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'App',
|
||
|
|
components: {Skeleton},
|
||
|
|
setup() {
|
||
|
|
let loading = ref(false);
|
||
|
|
const route = useRoute();
|
||
|
|
let showLayout = ref(true);
|
||
|
|
let event = ref(null);
|
||
|
|
let type = ref('');
|
||
|
|
provide('showLayout', showLayout);
|
||
|
|
provide('event', event);
|
||
|
|
let eventData = ref({});
|
||
|
|
const onEventData = () => { //动态改变值
|
||
|
|
return event.value
|
||
|
|
};
|
||
|
|
provide('onEventData', onEventData);
|
||
|
|
const onHandle = function(e){
|
||
|
|
loading.value = false;
|
||
|
|
event.value = e;
|
||
|
|
const data = e?.data;
|
||
|
|
if (data && data.type ) {
|
||
|
|
eventData.value = data;
|
||
|
|
type.value = data.type;
|
||
|
|
if(data.type === 'style') {
|
||
|
|
showLayout.value = data?.showLayout;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
window.addEventListener('message', onHandle );
|
||
|
|
|
||
|
|
onBeforeUnmount(()=>{
|
||
|
|
window.removeEventListener('message', onHandle)
|
||
|
|
})
|
||
|
|
return {
|
||
|
|
locale: zhCN,
|
||
|
|
route,
|
||
|
|
showLayout, event,
|
||
|
|
type,
|
||
|
|
eventData,
|
||
|
|
loading
|
||
|
|
};
|
||
|
|
},
|
||
|
|
unmounted(){
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#app {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|