antdv vue。表单 自定义组件使用 v-decorator
antd vue 中,在 form 表单中的自定义组件使用 v-decorator
问题描述
项目需要,在表单中上传图片,所以要自己定以一个上传图片的组件,直接在 form 中使用,但是普通的自定义组件无法使用表单的 v-decorator。
分析
this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"
经过 getFieldDecorator 或 v-decorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
你不再需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。
你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
你不应该用 v-model,可以使用 this.form.setFieldsValue 来动态改变表单值。
大概描述一下就是,一旦在 form 下使用了 v-decorator 之后,就不需要使用 v-model,其实实现上也有所相同,在自定义组件中需要自己定以 model 的东西,详细可以查阅官网。
简单说明
通俗来说,想使用 v-decorator,就必须要有个 value 想子组件传递数据。和一个 change 方法将子组件的数据变动告诉父组件,下面看部分代码
model: { prop: 'value', event: 'change' }, props: { value: { type: String // 这个参数是v-decorator给子组件传值用的 // 这里不要给默认值, 在form下使用会爆警告 Warning: SquareUpload `default value` can not collect, please use `option.initialValue` to set default value. } } watch: { // 监听数据变化,及时提交给父组件 fileList: { deep: true, immediate: true, handler: function (newV, oldV) { // 向父组件更新 this.$emit('change', temp) } } }
注意:value 不要给默认值,不然会爆警告default value can not collect, please use option.initialValue to set default value.
例子,封装一个上传图片的组件,在 form 中使用
子组件
<template> <div> <!-- one --> <div class="clearfix"> <a-upload name="upfile" :action="apiUrl" listType="picture-card" :fileList="imageList" :before-upload="beforeUpload" @preview="handlePreview" @change="imgChange" > <div v-if="imageList.length < maxListSize "> <a-icon type="plus"/> <div class="ant-upload-text">上传图片</div> </div> </a-upload> <a-modal :visible="previewVisible" :footer="null" @cancel="previewCancel"> <img alt="example" style="width: 100%" :src="previewImage"/> </a-modal> </div> </div> </template> <script> import {randomUUID, isJson} from "@util/functionBox"; export default { name: "imgUpload", props: { value: { type: String // 这个参数是v-decorator给子组件传值用的 // 这里不要给默认值, 在form下使用会爆警告 Warning: SquareUpload `default value` can not collect, please use `option.initialValue` to set default value. }, format: {type: Boolean, default: false}, maxListSize: {type: Number, default: 1}, }, model: { prop: 'value', event: 'change' }, data() { return { apiUrl: this.apiBaseURL + "/base/upload/upload_image", imageList: [], previewVisible: false, previewImage: "", } }, watch: { // 监听父组件传递过来的图片列表信息 value: { deep: true, immediate: true, handler: function (newV,oldV) { // 向父组件更新 if (newV === null || newV === '' || newV === undefined) { this.imageList = [] return } // 需要清空原有的文件列表,否则会出现多个🙅 this.imageList = [] if (Array.isArray(newV)) { //以防万一,避免出错 } else { if (this.format && isJson(newV)) { //需要格式化且是JSON格式才执行,否则会死循环输出 let caList = JSON.parse(newV) if (caList && caList.length && caList.length != 0) { // var newImgList = []; for (let i = 0; i < caList.length; i++) { this.pushImg(caList[i]) } // this.imageList = newImgList } } else { this.pushImg(newV) } } // this.$emit('change', newV) } }, //监听数据变化,及时提交给父组件 imageList: { deep: true, immediate: true, handler: function (fileList, oldV) { // 向父组件更新 if (this.imageList.length === 0) { return } // this.imageList = fileList; let urlInfo = null; if ( fileList.length != 0 && fileList[fileList.length - 1].status === "done") { // 处理数据 if (!this.format) { urlInfo = fileList[0].response.data } else { let imgs = []; for (let i = 0; i < fileList.length; i++) { if (fileList[i].response) { imgs.push(fileList[i].response.data); } // if (fileList[i].url) { // imgs.push(fileList[i].url); // } } urlInfo = JSON.stringify(imgs); } this.$emit('change', urlInfo) } } } }, methods: { imgChange({fileList}) { this.imageList = fileList; if ( fileList.length != 0 && fileList[fileList.length - 1].status === "done") { this.$message.success("上传成功!"); // this.$emit('change', this.imageList) } }, /**取消阅览 **/ previewCancel() { this.previewVisible = false; }, handlePreview(file) { this.previewImage = file.url || file.thumbUrl; this.previewVisible = true; }, beforeUpload(file) { // let file = el.file; const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'; if (!isJpgOrPng) { this.$message.error("您只能上传 图片 文件!"); } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('图片大小必须小于2mb!'); } return isJpgOrPng && isLt2M; }, pushImg(imgUrl) { if (!imgUrl) { return } //维护统一的格式 this.imageList.push({ uid: randomUUID(), name: imgUrl, status: "done", url: imgUrl, response: { data: imgUrl }, }) return this.imageList; }, getList() { return this.imageList; }, getFirst() { for (const info in this.imageList) { if (!info) { return info; } } }, } } </script> <style scoped> </style>
父组件使用
<imgUpload ref="imgUploadHead" v-decorator="['headImage',{ rules: [{ required: true,message: '请上传照片!' }] }]"></imgUpload>
主要针对单图片和多图片进行了封装📦
多图片后台返回和传入的格式:
“http://media.shixun365.com/image/31dc3ee8e4974c4d8257c9c3d1ece085.png”,“http://media.shixun365.com/image/17e2faf8d13e4e2b857cfde6748534b2.png”]
单图片的格式:
http://media.shixun365.com/image/31dc3ee8e4974c4d8257c9c3d1ece085.png