更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio
演示地址：RuoYi-Nbcio后台管理系统
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码： https://gitee.com/nbacheng/nbcio-boot
前端代码：https://gitee.com/nbacheng/nbcio-vue.git
在线演示（包括H5） ： http://122.227.135.243:9888
今天主要讲讲form-generator 的预览功能
预览本质就是要将转换后的代码渲染出来；
form-generator 这里运行的时候加载这里加了一个 iframe，iframe 加载的是提前写好的 html
<iframe
v-show="isIframeLoaded"
ref="previewPage"
class="result-wrapper"
frameborder="0"
src="/preview.html"
@load="iframeLoad"
/>这里调用了preview.html,这个文件在/public下面
<!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://lib.baomitu.com/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
<script src="https://lib.baomitu.com/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://lib.baomitu.com/axios/0.19.2/axios.min.js"></script>
<script src="https://lib.baomitu.com/element-ui/2.13.2/index.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>
- head 部分提前加载 vue、vue-router、element-ui 的 CDN 文件
- body 部分声明一个 id 为 previewApp 的 div 结点
这个 previewApp 的根结点并不直接挂载 vue 实例，实际执行预览时，还会往里加入 style 标签包裹的样式（上一步生成的 css 部分的代码）、一个 id 为 app 的 div 结点。
所以需要显示自己定义的组件的话，需要进行引入才行，否则模拟显示就会有问题。
