95 lines
2.9 KiB
HTML
95 lines
2.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|||
|
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|||
|
|
<title>form-generator-preview</title>
|
|||
|
|
<link href="https://unpkg.com/browse/element-plus@2.2.26/dist/index.css" rel="stylesheet">
|
|||
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|||
|
|
<script src="https://unpkg.com/browse/vue-router@4.1.6/dist/vue-router.global.prod.js"></script>
|
|||
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|||
|
|
<script src="https://unpkg.com/browse/element-plus@2.2.26/dist/index.full.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
-moz-osx-font-smoothing: grayscale;
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
text-rendering: optimizeLegibility;
|
|||
|
|
height: calc(100vh - 33px);
|
|||
|
|
padding: 12px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input,
|
|||
|
|
textarea {
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<noscript>
|
|||
|
|
<strong>抱歉，javascript被禁用，请开启后重试。</strong>
|
|||
|
|
</noscript>
|
|||
|
|
<div id="previewApp"></div>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
Vue.prototype.$axios = axios
|
|||
|
|
const childAttrs = {
|
|||
|
|
file: '',
|
|||
|
|
dialog: ' width="600px" class="dialog-width" v-if="visible" :visible.sync="visible" :modal-append-to-body="false" '
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.addEventListener('message', init, false)
|
|||
|
|
function init(event) {
|
|||
|
|
if (event.data.type === 'refreshFrame') {
|
|||
|
|
const code = event.data.data
|
|||
|
|
const attrs = childAttrs[code.generateConf.type]
|
|||
|
|
let links = ''
|
|||
|
|
|
|||
|
|
if (Array.isArray(code.links) && code.links.length > 0) {
|
|||
|
|
links = buildLinks(code.links)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.getElementById('previewApp').innerHTML = `${links}<style>${code.css}</style><div id="app"></div>`
|
|||
|
|
|
|||
|
|
if (Array.isArray(code.scripts) && code.scripts.length > 0) {
|
|||
|
|
this.loadScriptQueue(code.scripts, () => {
|
|||
|
|
newVue(attrs, code.js, code.html)
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
newVue(attrs, code.js, code.html)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function buildLinks(links) {
|
|||
|
|
let strs = ''
|
|||
|
|
links.forEach(url => {
|
|||
|
|
strs += `<link href="${url}" rel="stylesheet">`
|
|||
|
|
})
|
|||
|
|
return strs
|
|||
|
|
}
|
|||
|
|
function newVue(attrs, main, html) {
|
|||
|
|
main = eval(`(${main})`)
|
|||
|
|
main.template = `<div>${html}</div>`
|
|||
|
|
new Vue({
|
|||
|
|
components: {
|
|||
|
|
child: main
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
visible: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
template: `<div><child ${attrs}/></div>`
|
|||
|
|
}).$mount('#app')
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|