更多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://218.75.87.38: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 结点。
所以需要显示自己定义的组件的话，需要进行引入才行，否则模拟显示就会有问题。
