前言;

最近在做一系列后臺管理系統(tǒng)，其中用的最多的就是表單和表格了。這里講一下我最近對表單封裝的思考。 以下是我的設(shè)計思路以及具體實現(xiàn)，我使用的是vue3+element-plus，因此這個組件也是以這兩個庫為基礎(chǔ)。

設(shè)計目標

配置化

我們希望把表格的內(nèi)容，驗證規(guī)則,甚至于表單的樣式，格式都能更規(guī)則化，配置化，這樣后續(xù)我們可以通過構(gòu)造json去實現(xiàn)一個表單，甚至可用實現(xiàn)拖拽式的構(gòu)造表單。

參數(shù)簡單

盡量減少json的層級，減少json的參數(shù)，字段更加語義化。

自由度

json其實是一套自由度的很少的規(guī)則，但是vue則我們提供更多的自由度，比如h函數(shù)，比如動態(tài)組件，利用這些方法我們可以實現(xiàn)更高的自由度。

我的實現(xiàn)過程

表單項的格式設(shè)計

首先第一步，我們先設(shè)計一個基礎(chǔ)的格式,在這個JSON里，字段名都是很簡單的英文單詞，我專門把驗證的規(guī)則rule放到每個子項里來，這也比較符合直觀。

 const oneItem = {
          key: 'title',
          title: '小說名',
          component: 'el-input',
          props: { placeholder: '請輸入姓名' },
          rule: [{ required: true, trigger: 'blur', message: '必填項' }],
}

在這個格式里面，比較重要的主要是2個，key，component。key其實就是你表單里數(shù)據(jù)的字段名，而component則是你指定的編輯組件，在這里我們可以直接使用字符串，但其實這里可以通過vue的動態(tài)組件實現(xiàn)更靈活的應(yīng)用，比如我們換一個組件庫的input組件

import { Input } from '@varlet/ui' 
import '@varlet/ui/es/input/style/index.js'
const oneItem = {  component:  Input }

這時候，我們就需要動態(tài)組件去渲染它，因此我們可以這樣寫去渲染，當component是一個字符串，比如el-input的時候，我們渲染element的input組件，至于v-model這些我就省略了

<el-form-item v-for="item in items" :key="item.key">
  <el-input v-if="item.component === 'el-input'" />
  <component :is="item.component" />
</el-form-item>

v-bind的妙用

每個組件庫的組件參數(shù)都不一樣，而且有些屬性我們可能并不使用，比如el-input有這個屬性prefix-icon，是一個前綴圖標,別的組件庫不一定有啊，那到我們需要把所有組件庫的所有屬性都寫在json？ 我在之前的json中設(shè)計了以個props字段，這里面就是存放的是組件庫的屬性，或者是我們需要給組件傳的值. 這時候，vue給我們提供了一個很方便的功能，直接使用v-bind傳入一個對象，他就自動會幫我們把屬性綁定。 比如這樣寫

const props = {a:1,b:2}
 <el-input v-if="item.component === 'el-input'" v-bind="props" />

vue就會自動處理為下面這種, 這就是v-bind的妙用。當然運用renderFunction也可以實現(xiàn)這個效果，諸君可以自己嘗試一下

 <el-input v-if="item.component === 'el-input'" v-bind:a="props.a" v-bind:a="props.b"/>

computed的妙用：實現(xiàn)v-model

下面我們來看一下數(shù)據(jù)的問題，vue中提供了方便v-model，方便我們修改的值能實時響應(yīng),并且我們可以自己實現(xiàn)一自定義v-model。 它的基本原理是這樣，我們先父傳子，然后子再通過事件告訴父組件修改這個值。大概實現(xiàn)就是這樣

<script>
    <button>+1</button>
</script>
export default{
    props:[
    'modelValue', //v-model
    'a' //v-model:a
    ],

    emits:['update:modelValue','update:a'],
  
    methods:{
        add(){
            this.$emit('update:modelValue',this.modelValue++)
            this.$emit('update:a',this.a++)
        }
    }
}

但是這個代碼里有一個問題，在vue中我們其實是無法修改props的，也就是說this.modelValue++會報錯，那么如何解決這個問題呢，答案就是computed,computed其實也可以修改的，我們可以指定它的set方法,這樣就躲避了修改props的問題，從而實現(xiàn)了v-model

{
    computed:{
        num:{
            get(){
                return this.modelValue
            },
            set(val){
                 this.$emit('update:modelValue',val)
            }
        }
    }
}

useAttrs的妙用

在我的組件中有這樣一個功能，上傳。這就涉及到了回調(diào)函數(shù)的問題，也就是說我上傳完，甚至包括方法的名字，這樣才更靈活，比如我們在json中新增一個字段，

{
 uploader: {
     emits: 'handleUploadCover',
 }
}

然后我在渲染的時候會給它綁上這個事件,那么我們?nèi)绾潍@取到這個事件的函數(shù)，并調(diào)用呢？

<zForm @handleUploadCover="xxx" />

在vue3中，我使用了useAttrs,需要注意的是vue3這里似乎與vue2有些不同。vue3中，attrs獲取到的是沒有注冊的值，比如你如果在emits里聲明了，在這里就取不到了，不過這也正合我意，我們可以隨意指定事件名。

const attrs = useAttrs()
/*
  返回值
 {
     onHandleUploadCover:function(){xxx}
 }
*/

可以看到這里能獲取事件，只是名字略有不同，這里大家處理一下就行了

表單驗證

表單里最重要的就是驗證.首先在我之前的設(shè)計中，表單驗證的規(guī)則是分布在每一個子項中，因此我們需要整合一下，這一塊我就不贅述了，也很簡單。

驗證方法我是直接使用的el-form的驗證,只是封裝了一下罷了。 需要注意的是，如果你用的是script setup，需要使用defineExpose導(dǎo)出這個方法

const validate = ()=> new Promise((resolve) => {
        this.$refs.form.validate((isValid) => resolve(isValid));
      })
 defineExpose({
     validate
 })     

上傳文件

上傳文件這里我其實截取了一下element的上傳，只使用了它選擇的文件的功能，這塊其實可以自己實現(xiàn)的。 因為我上傳中間還要加很多參數(shù)，還有驗證，因此我使用了before-upload方法，并主動reject.

 <el-upload
        v-if="item.uploader"
        style="margin-top: 10px"
        :before-upload="(file) => beforeUpload(file, item)"
        :show-file-list="false"
        v-bind="item.uploader.props"
      >
        <el-button type="primary">點擊上傳</el-button>
 </el-upload>
 const beforeUpload = (rawFile, { key, uploader }) => {
     /*執(zhí)行邏輯，其實就是調(diào)起uploader.emits里的方法*/
     return Promise.reject()
 }

代碼總結(jié)

我把demo放到了這里，后續(xù)有時間我整理一下發(fā)個npm包。 stackblitz.com/edit/vue-m8…

這次封裝這個組件，我學(xué)到了很多東西，一些比較細微的vue3知識點，比如v-bind。但我也知道這也封裝也有一些問題或者叫爭論。

到底應(yīng)不應(yīng)該使用json

之前看過一篇封裝el-table的文章，里面就反對使用json，原因無非2點：json結(jié)構(gòu)過于龐大，json結(jié)構(gòu)不利于接手代碼的人使用。

• 先說第二點，我覺得通過我的定義是可以緩解這個問題的,但是難道你函數(shù)式封裝就沒有學(xué)習(xí)成本了？我覺得json封裝其實每次就是賦值黏貼，反而學(xué)習(xí)成本更低，但是開發(fā)成本會更高，你需要處理錯誤的值，錯誤的結(jié)構(gòu)，因此結(jié)構(gòu)越簡單越好，甚至可以拍平。
• json結(jié)構(gòu)并不龐大，龐大的是我們的表單，如果你表單里幾百個條目，你怎么樣寫都只會龐大，因此還是建議分割表單，及時上報。

需不需要v-model

在我這次封裝中，我把數(shù)據(jù)通過v-model實時返回了，但是當我寫到結(jié)尾的時候，我覺得表單的數(shù)據(jù)并不需要實時，因為我們需要的不是當前的數(shù)據(jù)，而是驗證后的正確數(shù)據(jù)。因此我覺得我們可以暴露出一個getData方法，返回驗證正確的數(shù)據(jù)。

性能問題

實際使用中，我發(fā)現(xiàn)這樣封裝似乎有點卡，目前暫時不知道是哪里的問題，有待研究

到此這篇關(guān)于JavaScript element的Form表單生成方式的文章就介紹到這了,更多相關(guān)JavaScript  Form內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論