Ruoyi表单构建

时间：2022-10-31 08:05:13

Ruoyi表单构建通过拖动组件就能自动生成前端代码，很方便，所以本文简单通过上层函数源码来梳理一下大致流程，如有需要再自行仔细一行行分析底层代码。

组件拖动

实现组件拖动功能主要依赖第三方库：VueDragger。简单通过例子+注释介绍一下：

<draggable  
  class="components-draggable"  
  :list="inputComponents"
  :group="{ name: 'componentsGroup', pull: 'clone', put: false } 
  :clone="cloneComponent"
  draggable=".components-item"  
  :sort="false"  
  @end="onEnd"  
>  
  <div  
    v-for="(element, index) in inputComponents" :key="index" class="components-item"  
    @click="addComponent(element)"  
  >  
    <div class="components-body">  
      <svg-icon :icon-class="element.tagIcon" />  
      {{ element.label }}  
    </div>  
  </div>  
</draggable>

:list组件数据，:group group通过name来分组，pull和put设置拖出和拖入规则。

生成代码

点击导出vue文件或者是复制代码，可以将设计好的页面代码生成并且导出，这里我用复制代码功能作为例子来说明一下流程。

点击复制代码，显示弹窗

<code-type-dialog
      :visible.sync="dialogVisible"
      title="选择生成类型"
      :show-file-name="showFileName"
      @confirm="generate"
/>

这是一个自定义组件，子组件以el-dialog为主，当选择好弹窗类型并且点击确认时，子组件将 {fileName:null,type:'file'} 传出。然后调用generate。

      generate(data) {//data:{filename,type}
      const func = this[`exec${titleCase(this.operationType)}`]//拼接方法名字,然后调用
      this.generateConf = data
      func && func(data)
    },

this[ exec${titleCase(this.operationType)} ] 拼接出 execCopy，然后调用

execCopy(data) {
      document.getElementById('copyNode').click()
},

点击该元素。在html部分我们可以看到，该id对应的是一个隐藏的input元素，本身无任何功能。

关键部分

看似点击一个隐藏元素没有任何意义，实际上它只是触发关键的“钥匙”。在mounted()中，ruoyi使用的第三方库ClipboardJS构建了一个对象。clipboardJS是复制粘贴包，所以该部分就是实现的真正原理。

  mounted() {
    const clipboard = new ClipboardJS('#copyNode', {//当点击 id=copyNode的元素时，会触发复制
      text: trigger => {
        const codeStr = this.generateCode()//产生页面代码的关键方法
        this.$notify({
          title: '成功',
          message: '代码已复制到剪切板，可粘贴。',
          type: 'success'
        })
        return codeStr
      }
    })
    clipboard.on('error', e => { //此处就是一个失败回调。
      this.$message.error('代码复制失败')
    })
  },
...
}

该对象绑定了 "copyNode" 元素，点击该元素就会触发复制。text的值就是填充到粘贴版上的文本。

    generateCode() {
      const { type } = this.generateConf //就是{filename，type}
      this.AssembleFormData()//将drawingList和formConf组装成formData，方便之后使用。
      const script = vueScript(makeUpJs(this.formData, type))
      const html = vueTemplate(makeUpHtml(this.formData, type))
      const css = cssStyle(makeUpCss(this.formData))//构建出vue三段式字符串
      return beautifier.html(html + script + css, beautifierConf.html)
    },

这就是大致流程，如果需要了解生成代码更多的细节，可以自行深入调试。

标签：

相关文章