Mr_HJ / form-generator项目文档学习与记录（续1）

更多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

javascript 复制代码

<iframe
              v-show="isIframeLoaded"
              ref="previewPage"
              class="result-wrapper"
              frameborder="0"
              src="/preview.html"
              @load="iframeLoad"
            />

这里调用了preview.html,这个文件在/public下面

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://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 结点。

所以需要显示自己定义的组件的话，需要进行引入才行，否则模拟显示就会有问题。