vue ant design封装弹窗表单如何使用(ant,design,vue,开发技术)

vue ant design 封装弹窗表单

<template><divid="formForm"><a-modal:visible="true":title='title'@ok="handleOk('ok')"@cancel="handleOk('return')":centered="true":confirmLoading="confirmLoading":width="width"><a-form:form="formState":label-col="{span:5}":wrapper-col="{span:17}"><divv-for="itmeinformData":key="itme.value"><!--输入款--><a-form-item:label="itme.label"v-if="itme.type==='input'":label-col="{span:itme.labelCol?itme.labelCol:5}":wrapper-col="{span:itme.wrapper?itme.wrapper:17}"><a-inputv-decorator="[itme.value,{rules:[{required:itme.required?itme.required:false,message:itme.message?itme.message:''},{validator:itme.validator}]}]":placeholder="!itme.placeholder?itme.label:itme.label"allowClear><!--插入输入框的下拉框选择器--><a-selectv-if="itme.select&&itme.select.length>0"slot="addonBefore"v-decorator="[itme.header]"><a-select-optionv-for="selectinitme.select":key="select.value">{{select.label}}</a-select-option></a-select></a-input></a-form-item><!--开始结束时间选择--><a-form-item:label="itme.label"v-if="itme.type==='rangePicker'"><a-range-picker:placeholder="!itme.placeholder?itme.label:itme.placeholder"showTime:v-decorator="[itme.value,{rules:[{required:itme.required?itme.required:false,message:itme.message?itme.message:''}]}]"/></a-form-item><!--单个时间选择--><a-form-item:label="itme.label"v-if="itme.type==='datePicker'"><a-date-picker:v-decorator="[itme.value,{rules:[{required:itme.required?itme.required:false,message:itme.message?itme.message:''}]}]"showTime:placeholder="!itme.placeholder?itme.label:itme.placeholder"/></a-form-item><!--选择框--><a-form-item:label="itme.label"v-if="itme.type==='select'":label-col="{span:itme.labelCol?itme.labelCol:5}":wrapper-col="{span:itme.wrapper?itme.wrapper:8}"><a-selectallowClearv-decorator="[itme.value,{rules:[{required:itme.required?itme.required:false,message:itme.message?itme.message:''}]}]":placeholder="!itme.placeholder?itme.label:itme.placeholder"><a-select-optionv-for="optionItmeinitme.option":key="optionItme.value">{{optionItme.label}}</a-select-option></a-select></a-form-item><!--单选框--><a-form-item:label="itme.label"v-if="itme.type==='radio'"><a-radio-groupv-decorator="[itme.value,{rules:[{required:itme.required?itme.required:false,message:itme.message?itme.message:''}]}]"><a-radiov-for="radioItmeinitme.radio":key="radioItme.value":value="radioItme.value">{{radioItme.label}}</a-radio></a-radio-group></a-form-item><!--开关按钮--><a-form-item:label="itme.label"v-if="itme.type==='switch'"><a-switchv-decorator="[itme.value,{valuePropName:'checked'}]"/></a-form-item><!--图片上传--><a-form-item:label="itme.label"v-if="itme.type==='upload'":label-col="{span:itme.labelCol?itme.labelCol:5}":wrapper-col="{span:itme.wrapper?itme.wrapper:20}"><a-uploadv-decorator="[itme.value,{valuePropName:'fileList',getValueFromEvent:normFile,}]":action="itme.action?itme.action:'https://www.mocky.io/v2/5cc8019d300000980a055e76'"listType="picture-card"@preview="handlePreview"><divv-if="itme.value.length<8"><a-icontype="plus"/><divclass="ant-upload-text">点击上传图片</div></div></a-upload><a-modal:visible="previewVisible":footer="null"@cancel="previewVisible=false"><imgalt="example":src="previewImage"/></a-modal></a-form-item></div></a-form></a-modal></div></template>

<scriptlang='ts'>import{Component,Vue,Prop,Emit,Watch}from'vue-property-decorator';importMomentfrom'moment'functiongetBase64(file){returnnewPromise((resolve,reject)=>{constreader=newFileReader();reader.readAsDataURL(file);reader.onload=()=>resolve(reader.result);reader.onerror=error=>reject(error);});}@Component({data(){return{formState:this.$form.createForm(this),previewVisible:false,previewImage:''};},})exportdefaultclassFormFormextendsVue{[x:string]:any;//弹出框宽度@Prop({type:String,default:'500px'})width!:string;//接收表单渲染内容数据@Prop({type:Object,default:()=>{console.log()}})form!:{};//接收弹窗窗口标题@Prop({type:String,default:'操作窗口'})title!:string;//接收表单渲染内容格式@Prop({type:Array,default:()=>[]})formData!:[];//返出取消和确定按钮@Emit('handleOk')handleOk(e){if(e==='return'){return'true';}elseif(e==='ok'){letstateType:object|boolean=false;this.formState.validateFields((err,value)=>{if(!err){this.confirmLoading=true;stateType=value;}})returnstateType;}}//监听表单渲染内容数据接入+转换多余传入问题@Watch('form',{immediate:true,deep:false})onForm(e){letobj:object={};Object.keys(e).forEach(key=>{Array.from(this.formData).forEach((res:any|object)=>{if(key===res.value||key===res.header){if(res.type==='rangePicker'&&e[key].length>0){e[key]=[Moment(e[key][0]),Moment(e[key][1])]}if(res.type==='datePicker'&&e[key]){e[key]=Moment(e[key])}obj[key]=e[key]}})})this.$nextTick(()=>{this.formState.setFieldsValue(obj)})}//监听是否弹窗属性publicvisibleOff:boolean=false;//确定按钮loadingpublicconfirmLoading:boolean=false;//---------methods------------asynchandlePreview(file){if(!file.url&&!file.preview){file.preview=awaitgetBase64(file.originFileObj);}this.previewImage=file.url||file.preview;this.previewVisible=true;}normFile(e){if(Array.isArray(e)){returne;}returne&&e.fileList;}}</script>

<stylelang='scss'scpoed>.ant-form-item-label{white-space:pre-wrap;line-height:25px;}.ant-row{display:flex;align-items:center;}.ant-form{max-height:60vh;overflow:auto;&::-webkit-scrollbar{display:none;;}}.ant-form-item{margin-bottom:10px;}.ant-form-item-control{left:10px;max-height:225px;overflow:auto;&::-webkit-scrollbar{display:none;}}.ant-upload-select-picture-cardi{font-size:32px;color:#999;}.ant-upload-select-picture-card.ant-upload-text{margin-top:8px;color:#666;}</style>

部分效果图：

使用ant-design-vue的Form表单

使用脚手架新建项目

vuecreateantd-demo

所以，得到了这么一个项目，如下

安装并导入ant-design-vue,使用Form组件

npminstall--saveant-design-vue@next

修改main.ts

import{createApp}from'vue';importAppfrom'./App.vue';importAntdfrom"ant-design-vue";import"ant-design-vue/dist/antd.css";createApp(App).use(Antd).mount('#app');

修改App.vue

<template><HelloWorld/></template>

<scriptlang="ts">import{defineComponent}from'vue';importHelloWorldfrom'./components/HelloWorld.vue';exportdefaultdefineComponent({name:'App',components:{HelloWorld}});</script>

<style>#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}</style>

修改HelloWorld.vue

<template><a-formlayout="inline":model="formState"@finish="handleFinish"@finishFailed="handleFinishFailed"><a-form-item><a-inputv-model:value="formState.user"placeholder="Username"><template#prefix><UserOutlined/></template></a-input></a-form-item><a-form-item><a-inputv-model:value="formState.password"type="password"placeholder="Password"><template#prefix><LockOutlined/></template></a-input></a-form-item><a-form-item><a-buttontype="primary"html-type="submit":disabled="formState.user===''||formState.password===''">Login</a-button></a-form-item></a-form></template>

<scriptlang="ts">import{UserOutlined,LockOutlined}from'@ant-design/icons-vue';import{ValidateErrorEntity}from'ant-design-vue/es/form/interface';import{defineComponent,reactive,UnwrapRef}from'vue';interfaceFormState{user:string;password:string;}exportdefaultdefineComponent({setup(){constformState:UnwrapRef<FormState>=reactive({user:'',password:'',});consthandleFinish=(values:FormState)=>{console.log(values,formState);};consthandleFinishFailed=(errors:ValidateErrorEntity<FormState>)=>{console.log(errors);};return{formState,handleFinish,handleFinishFailed,};},components:{UserOutlined,LockOutlined,},});</script>

启动应用,测试验证

npm run serve启动应用，效果如下

好了，应用就暂时介绍到这里。其实，我更想说说我的疑惑：

Hello.vue中，Username输入框的前面有个图片前缀，Password输入框的前面也有一个图片前缀，都是通过<template #prefix></template>实现的，一眼看去，应该就是通过插槽实现的，但是具体的实现过程是怎样的，尚不清楚。

简单调试了一下，如下图所示。

ant-design-vue的Form组件的FormItem.js的部分源码如下，