1. 首頁 > 生活百科 > >

Ruoyi表單構建

生活百科Ruoyi表單構建

Ruoyi表單構建通過拖動組件就能自動生成前端代碼，很方便，所以本文簡單通過上層函數源碼來梳理一下大致流程，如有需要再自行仔細一行行分析底層代碼 。
組件拖動實現組件拖動功能主要依賴第三方庫：VueDragger 。簡單通過例子+注釋介紹一下：
<draggableclass="components-draggable":list="inputComponents":group="{ name: 'componentsGroup', pull: 'clone', put: false }:clone="cloneComponent"draggable=".components-item":sort="false"@end="onEnd"><divv-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 = datafunc && 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)},這就是大致流程，如果需要了解生成代碼更多的細節 ， 可以自行深入調試 。
【Ruoyi表單構建】

    推薦閱讀