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.
 
 
 
 
 
 
vite-vue3-lowcode/src/visual-editor/components/header/preview.vue

68 lines
1.3 KiB

<template>
<el-dialog v-model="dialogVisible" custom-class="h5-preview" :show-close="false" width="360px">
<iframe
v-if="dialogVisible"
:style="{ width: '100%', height: '100%' }"
:src="previewUrl"
frameborder="0"
scrolling="auto"
></iframe>
</el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import { useVModel } from '@vueuse/core'
import { BASE_URL } from '@/visual-editor/utils'
/**
* @name: preview
* @author: 卜启缘
* @date: 2021/4/29 23:09
* @description:preview
* @update: 2021/4/29 23:09
*/
export default defineComponent({
name: 'Preview',
props: {
visible: {
type: Boolean,
default: false
}
},
emits: ['update:visible'],
setup(props, { emit }) {
const state = reactive({
dialogVisible: useVModel(props, 'visible', emit),
previewUrl: `${BASE_URL}preview/${location.hash}`
})
return {
...toRefs(state)
}
}
})
</script>
<style lang="scss">
.h5-preview {
overflow: hidden;
.el-dialog__body {
width: 360px;
height: 640px;
padding: 0;
}
.el-dialog__header {
display: none;
}
.simulator {
padding-right: 0;
&::-webkit-scrollbar {
width: 0;
}
}
}
</style>