You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.9 KiB
71 lines
1.9 KiB
<!--
|
|
* @Author: 卜启缘
|
|
* @Date: 2021-06-01 09:45:21
|
|
* @LastEditTime: 2021-07-13 21:59:22
|
|
* @LastEditors: 卜启缘
|
|
* @Description: 效果预览页面
|
|
* @FilePath: \vite-vue3-lowcode\preview\views\preview.vue
|
|
-->
|
|
<template>
|
|
<template v-for="outItem in blocks" :key="outItem._vid">
|
|
<slot-item :element="outItem" :models="models" :actions="actions" />
|
|
</template>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, reactive, toRefs, onMounted } from 'vue';
|
|
import { Toast } from 'vant';
|
|
import router from '../router';
|
|
import SlotItem from './slot-item.vue';
|
|
import type { VisualEditorModelValue } from '@/visual-editor/visual-editor.utils';
|
|
import { CacheEnum } from '@/enums';
|
|
|
|
export default defineComponent({
|
|
name: 'Preview',
|
|
components: {
|
|
SlotItem,
|
|
},
|
|
setup() {
|
|
const jsonData: VisualEditorModelValue = JSON.parse(
|
|
localStorage.getItem(CacheEnum.PAGE_DATA_KEY) as string,
|
|
);
|
|
|
|
if (!jsonData || !Object.keys(jsonData.pages)) {
|
|
Toast.fail('当前没有可以预览的页面！');
|
|
}
|
|
|
|
const route = router.currentRoute;
|
|
|
|
const currentPage = jsonData.pages[route.value.path];
|
|
console.log('currentPage:', currentPage);
|
|
|
|
const state = reactive({
|
|
blocks: currentPage?.blocks,
|
|
});
|
|
|
|
// 如果当前页面路由匹配不到，则重定向到首页
|
|
if (!state.blocks) {
|
|
router.replace('/');
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (currentPage?.config) {
|
|
const { bgImage, bgColor } = currentPage.config;
|
|
const bodyStyleStr = `
|
|
body {
|
|
background-color: ${bgColor};
|
|
background-image: url(${bgImage});
|
|
}
|
|
`;
|
|
document.styleSheets[0].insertRule(bodyStyleStr);
|
|
}
|
|
});
|
|
|
|
return {
|
|
...toRefs(state),
|
|
actions: jsonData.actions,
|
|
models: jsonData.models,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|