antd?vue中,如何在form表單中的自定義組件使用v-decorator
antd vue中在form表單中的自定義組件使用v-decorator
問題描述
項(xiàng)目需要,在表單中上傳圖片,所以要自己定以一個(gè)上傳圖片的組件,直接在form中使用,但是普通的自定義組件無法使用表單的v-decorator。
分析
轉(zhuǎn)自官方的一段話
this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"
經(jīng)過 getFieldDecorator或v-decorator 包裝的控件,表單控件會(huì)自動(dòng)添加 value(或 valuePropName 指定的其他屬性) onChange(或 trigger 指定的其他屬性),數(shù)據(jù)同步將被 Form 接管,這會(huì)導(dǎo)致以下結(jié)果:
- 你不再需要也不應(yīng)該用 onChange 來做同步,但還是可以繼續(xù)監(jiān)聽 onChange 等事件。
- 你不能用控件的 value defaultValue 等屬性來設(shè)置表單域的值,默認(rèn)值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
- 你不應(yīng)該用 v-model,可以使用 this.form.setFieldsValue 來動(dòng)態(tài)改變表單值。
大概描述一下就是,一旦在form下使用了v-decorator之后,就不需要使用v-model,其實(shí)實(shí)現(xiàn)上也有所相同,在自定義組件中需要自己定以model的東西,詳細(xì)可以查閱官網(wǎng)。
簡(jiǎn)單說明
通俗來說,想使用v-decorator,就必須要有個(gè)value想子組件傳遞數(shù)據(jù)。
和一個(gè)change方法將子組件的數(shù)據(jù)變動(dòng)告訴父組件,下面看部分代碼
? model: { ? ? prop: 'value', ? ? event: 'change' ? }, ?? ? props: { ? ? value: { ? ? ? type: String ? ? ? // 這個(gè)參數(shù)是v-decorator給子組件傳值用的 ? ? ? // 這里不要給默認(rèn)值, 在form下使用會(huì)爆警告 Warning: SquareUpload `default value` can not collect, ?please use `option.initialValue` to set default value. ? ? } ? } ? ?watch: { ? ? // 監(jiān)聽數(shù)據(jù)變化,及時(shí)提交給父組件 ? ? fileList: { ? ? ? deep: true, ? ? ? immediate: true, ? ? ? handler: function (newV, oldV) { ? ? ? // 向父組件更新 ? ? ? ? this.$emit('change', temp) ? ? ? } ? ? } }
注意:value不要給默認(rèn)值,不然會(huì)爆警告default value can not collect, please use option.initialValue to set default value.
例子,封裝一個(gè)上傳圖片的組件,在form中使用
子組件
<template> ? <div class="clearfix"> ? ? <a-upload ? ? ? :showRemoveIcon="false" ? ? ? :action="url" ? ? ? list-type="picture-card" ? ? ? :file-list="fileList" ? ? ? @preview="handlePreview" ? ? ? @change="handleChange" ? ? > ? ? ? <div v-if="fileList.length < max && isShow"> ? ? ? ? <a-icon type="plus" /> ? ? ? ? <div class="ant-upload-text"> ? ? ? ? ? Upload ? ? ? ? </div> ? ? ? </div> ? ? </a-upload> ? ? <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"> ? ? ? <img alt="example" style="width: 100%" :src="previewImage" /> ? ? </a-modal> ? </div> </template> <script> import config from '@/views/constant/constantConfig' function getBase64 (file) { ? return new Promise((resolve, reject) => { ? ? const reader = new FileReader() ? ? reader.readAsDataURL(file) ? ? reader.onload = () => resolve(reader.result) ? ? reader.onerror = error => reject(error) ? }) } export default { ? name: 'SquareUpload', ? model: { ? ? prop: 'value', ? ? event: 'change' ? }, ? props: { ? ? value: { ? ? ? type: String ? ? ? // 這個(gè)參數(shù)是v-decorator給子組件傳值用的 ? ? ? // 這里不要給默認(rèn)值, 在form下使用會(huì)爆警告 Warning: SquareUpload `default value` can not collect, ?please use `option.initialValue` to set default value. ? ? }, ? ? // 上傳地址 ? ? url: { ? ? ? type: String, ? ? ? default: config.uploadUrl ? ? }, ? ? isShow: { ? ? ? type: Boolean, ? ? ? default: true ? ? }, ? ? // 最多上傳數(shù)量 ? ? max: { ? ? ? type: Number, ? ? ? default: 8 ? ? } ? }, ? data () { ? ? return { ? ? ? previewVisible: false, ? ? ? previewImage: '', ? ? ? fileList: [] ? ? } ? }, ? methods: { ? ? handleCancel () { ? ? ? this.previewVisible = false ? ? }, ? ? // 處理預(yù)覽 ? ? async handlePreview (file) { ? ? ? if (!file.url && !file.preview) { ? ? ? ? file.preview = await getBase64(file.originFileObj) ? ? ? } ? ? ? this.previewImage = file.url || file.preview ? ? ? this.previewVisible = true ? ? }, ? ? handleChange ({ file, fileList }) { ? ? ? this.fileList = fileList ? ? } ? }, ? watch: { ? ? // 監(jiān)聽數(shù)據(jù)變化,及時(shí)提交給父組件 ? ? fileList: { ? ? ? deep: true, ? ? ? immediate: true, ? ? ? handler: function (newV, oldV) { ? ? ? ? if (this.fileList.length === 0) { ? ? ? ? ? return ? ? ? ? } ? ? ? ? this.fileList = newV ? ? ? ? const temp = this.fileList.filter(item => item.status !== 'uploading').map(item => (item.uid < 0 && item.name) || item.response.data.newFileName).join(',') ? ? ? ? // 向父組件更新 ? ? ? ? this.$emit('change', temp) ? ? ? } ? ? }, ? ? // 監(jiān)聽父組件傳遞過來的圖片列表信息 ? ? value: { ? ? ? deep: true, ? ? ? immediate: true, ? ? ? handler: function (newV) { ? ? ? ? // 數(shù)據(jù)為空的三種情況 ? ? ? ? if (newV === null || newV === '' || newV === undefined) { ? ? ? ? ? this.fileList = [] ? ? ? ? ? return ? ? ? ? } ? ? ? ? let count = -1 ? ? ? ? let temp = [] ? ? ? ? const tempList = [] ? ? ? ? temp = newV.split(',') ? ? ? ? temp.forEach(item => { ? ? ? ? ? tempList.push({ ? ? ? ? ? ? uid: count, ? ? ? ? ? ? name: item, ? ? ? ? ? ? status: 'done', ? ? ? ? ? ? url: config.baseImgUrl + item ? ? ? ? ? }) ? ? ? ? ? count-- ? ? ? ? }) ? ? ? ? this.fileList = tempList ? ? ? } ? ? } ? } } </script> <style> ? /* you can make up upload button and sample style by using stylesheets */ ? .ant-upload-select-picture-card i { ? ? font-size: 32px; ? ? color: #999; ? } ? .ant-upload-select-picture-card .ant-upload-text { ? ? margin-top: 8px; ? ? color: #666; ? } </style>
父組件使用
? ? ? ? <a-form-item ? ? ? ? ? label="上傳標(biāo)題圖片" ? ? ? ? ? :labelCol="labelCol" ? ? ? ? ? :wrapperCol="wrapperCol"> ? ? ? ? ? <SquareUpload :isShow="!showable" v-decorator="['serveTitleImg', {rules: [{required: true, message: '請(qǐng)選擇圖片'}]}]"></SquareUpload> ? ? ? ? </a-form-item>
v-decorator antd vue的理解
v-decorator是ant Design的控件驗(yàn)證屬性
經(jīng)過 getFieldDecorator 或 v-decroator 包裝的控件,表單控件會(huì)自動(dòng)添加 value onChange 或者 trigger ,數(shù)據(jù)同步由Form接管,這會(huì)導(dǎo)致以下結(jié)果
- 你不在需要也不應(yīng)該用 onChange 同步,但是可以繼續(xù)監(jiān)聽 onChange事件
- 你不能用控件的 value defaultValue等屬性來設(shè)置表單域的值,默認(rèn)值可以用 getFieldDecorator 或 v-decorator里的 initialValue
- 你不應(yīng)該用 v-model 可以使用 this.form.setFieldsValue 來動(dòng)態(tài)改變表單值
定義form:
<template> ? <div class="main"> ? ? <a-form ? ? ? id="formLogin" ? ? ? class="user-layout-login" ? ? ? ref="formLogin" ? ? ? :form="form" ? ? ? @submit="handleSubmit" ? ? > ? ? ? ? <a-form-item> ? ? ? ? ? ? <a-input ? ? ? ? ? ? ? size="large" ? ? ? ? ? ? ? type="text" ? ? ? ? ? ? ? placeholder="賬戶: " ? ? ? ? ? ? ? v-decorator="[ ? ? ? ? ? ? ? ? 'username', ? ? ? ? ? ? ? ? {initialValue:'',rules: [{ required: true, message: '請(qǐng)輸入帳戶名或郵箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'} ? ? ? ? ? ? ? ]" ? ? ? ? ? ? > ? ? ? ? ? ? ? <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" /> ? ? ? ? ? ? </a-input> ? ? ? ? ? </a-form-item> ? ? </a-form> ?</div> </template> ? <script> ... export default { ? ... ? data () { ? ? return { ? ? ? ... ? ? ? form: this.$form.createForm(this), ? ? } ? }, ? created () { ? ?? ? }, ? ... }? </script>
v-decroator取值
this.form.vaidateFields((err, values) => { ? ? console.log(values) // {username: ''} })
v-decroator賦值
this.form.setFieldsValue({ ? ? username: '設(shè)置值' })
清空表單數(shù)據(jù)
this.form.resetFields()
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Ant Design Vue日期組件的時(shí)間限制方式
這篇文章主要介紹了Ant Design Vue日期組件的時(shí)間限制方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04npm install卡在“sill idealTree buildDeps“問題的兩種解
本文主要介紹了npm install卡在“sill idealTree buildDeps“問題的兩種解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例
這篇文章主要介紹了Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue之webpack -v報(bào)錯(cuò)解決方案總結(jié)
這篇文章主要介紹了vue之webpack -v報(bào)錯(cuò)解決方案總結(jié),本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09Vue+Openlayer實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn)變形效果
Openlayer具有自己的擴(kuò)展插件ol-ext,可以用來實(shí)現(xiàn)圖形的拖拽、旋轉(zhuǎn)、縮放、拉伸、移動(dòng)等操作,本文將主要介紹通過Openlayer實(shí)現(xiàn)圖形的拖動(dòng)和旋轉(zhuǎn),需要的同學(xué)可以學(xué)習(xí)一下2021-11-11vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的簡(jiǎn)單示例
在vue項(xiàng)目中難免遇到有要生成條形碼或者二維碼的功能需求,下面這篇文章主要給大家介紹了關(guān)于vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12簡(jiǎn)單學(xué)習(xí)vue指令directive
這篇文章主要和大家一起簡(jiǎn)單學(xué)習(xí)一下vue指令:directive,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11Vue模仿ElementUI的form表單實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue模仿ElementUI的form表單的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03