Mr_HJ / form-generator项目文档学习与记录(续2)

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

上面代码按钮显示相应的代码与界面

javascript 复制代码
<el-button icon="el-icon-view" type="text" @click="Code">
          代码
        </el-button>
javascript 复制代码
Code() {
      this.operationType = 'Code'
      let data = {
        fileName: undefined,
          type: 'file'
      }
      this.generate(data);
    },
javascript 复制代码
generate(data) {
      const func = this[`exec${titleCase(this.operationType)}`]
      this.generateConf = data
      func && func(data)
    },

上面实现是调用了下面的方法,就是execCode方法

ƒ execCode(data) {

this.AssembleFormData();

this.drawerVisible = true;

}

其中AssembleFormData就把配置信息与要显示的字段放进去

javascript 复制代码
AssembleFormData() {
      this.formData = {
        ...this.formConf,
        fields: deepClone(this.drawingList)
      }
    },

通过开关显示这个下面的组件

javascript 复制代码
<form-drawer
      :visible.sync="drawerVisible"
      :form-data="formData"
      size="100%"
      :generate-conf="generateConf"
    />

这个页面主要用到了两个组件,样式优化组件beautifier和显示组件monaco-editor,在打开el-drawer的时候就进行初始化了

javascript 复制代码
onOpen() {
      const { type } = this.generateConf
      this.htmlCode = makeUpHtml(this.formData, type)
      this.jsCode = makeUpJs(this.formData, type)
      this.cssCode = makeUpCss(this.formData)
      this.key = +new Date()
      loadBeautifier(btf => {
        beautifier = btf
        this.htmlCode = beautifier.html(this.htmlCode, beautifierConf.html)
        this.jsCode = beautifier.js(this.jsCode, beautifierConf.js)
        this.cssCode = beautifier.css(this.cssCode, beautifierConf.html)

        loadMonaco(val => {
          monaco = val
          this.setEditorValue('editorHtml', 'html', this.htmlCode)
          this.setEditorValue('editorJs', 'js', this.jsCode)
          this.setEditorValue('editorCss', 'css', this.cssCode)
          if (!this.isInitcode) {
            this.isParser = true
            this.isParser && (this.isInitcode = true) && this.runCode()
          }
        })
      })
    },

对于左边代码显示部分,主要是下面部分处理,为了避免一些问题,下面注释了一些没用的信息

javascript 复制代码
setEditorValue(id, type, codeStr) {
     // if (editorObj[type]) {
     //   editorObj[type].setValue(codeStr)
     // } else {
        editorObj[type] = monaco.editor.create(document.getElementById(id), {
          value: codeStr,
          theme: 'vs-dark',
          language: mode[type],
          automaticLayout: true
        })
      //}
      // ctrl + s 刷新
      editorObj[type].onKeyDown(e => {
        if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {
          this.runCode()
        }
      })
    },

之前说过,原来模拟显示采用iframe 加载的是提前写好的 html,但这种方式对于新加的组件就不怎么友好了,所以修改成如下方式了

javascript 复制代码
<div class="view-border">
              <parser v-show="isParser" :form-conf="formData" @submit="submitForm" :key="key" ref="previewForm" />
            </div>

效果图如下:

相关推荐
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员8 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 小时前
前端图像处理(一)
前端