一、简介
-
在使用
Antdv
中Form
表单的时候,有时候需要官方自带的组件未必够用。 -
这个时候需要使用到自定义的一些组件,自定义的组件需要支持数据双向绑定,也需要支持
v-decorator
的数据效验,或者默认值设置等等。
二、自定义相关组件
-
CustomInput.vue
:自定义一个输入框来举例<template> <!-- 包装一个 input,让它支持数据双向绑定 v-model,同时也支持 form 表单的效验 --> <div class="custom-input"> <!-- 使用一个输入框 --> <a-input :placeholder="placeholder" v-model="valuePro" @change="inputChange" /> </div> </template> <script> export default { // a-form 表单会监听下面事件与值,到时候需要通过 change 事件传出新的值即可,v-decorator 会通过 change 事件接受新值 model: { prop: 'value', event: 'change' }, props: { // 当前组件值 // 默认是给 v-model 绑定值使用的 value: { type: String // 当通过 a-from 标签包裹时: // 这个参数是 v-decorator 给子组件传值用的 // 这里不要给默认值, 在 form 下使用会爆警告 Warning: SquareUpload `default value` can not collect, please use `option.initialValue` to set default value. }, // 占位符 placeholder: { type: String, default: () => undefined } }, computed: { // 支持 v-model 双向数据绑定,如果有新数据会通过 $emit 一个 input 事件进行修改 v-model 的值,也就是当前 value 值。 // 写法是固定的,vue 自动处理,只管通过 $emit('input', newValue) 抛出去新的值即可。 currentValue: { get () { return this.value }, set (newValue) { this.$emit('input', newValue) } } }, watch: { // 监听当前值变化,及时提交给父组件 currentValue: { deep: true, immediate: true, handler: function (newValue) { // 记录最新的值 this.valuePro = newValue // 判断当前的 value 值是否为 undefined, 如果是的话不用抛出去,要不然 form 标签就会走效验,并提示对应的错误了 if (newValue !== undefined) { // v-decorator 会通过 change 事件接受新值 this.$emit('change', newValue) } } } }, data () { return { // 当前页面值,用于做桥梁使用的 // 当前页面操作修改的就是这个值,外部传进来也会更新这个值,它变化了在通过 input change 去更新外部的值 valuePro: undefined } }, methods: { // input 输入 inputChange (e) { // 传出去最新值,这里只需要通过 change 事件传出去即可,内部的 value 也会发生变化 this.$emit('change', e.target.value) } } } </script>
-
home.vue
:进行使用<template> <!-- form --> <a-form :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 5 }" @submit="handleSubmit" > <!-- 原生组件 --> <a-form-item label="原生组件"> <a-input placeholder="请输入名称" v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]" /> </a-form-item> <!-- 自定义组件 --> <a-form-item label="自定义组件"> <custom-input placeholder="请输入简介" v-decorator="['info', { rules: [{ required: true, message: '请输入名称!' }] }]" /> </a-form-item> <!-- 提交按钮 --> <a-form-item label="提交按钮"> <a-button type="primary" html-type="submit">Submit</a-button> </a-form-item> </a-form> </template> <script> import CustomInput from './CustomInput' export default { components: { CustomInput }, data () { return { // 创建一个 Form 对象 form: this.$form.createForm(this) } }, methods: { // 提交按钮 handleSubmit(e) { e.preventDefault() // 效验数据 this.form.validateFields((err, values) => { if (!err) { console.log('Form表单数据效验成功:', values) } }) } } } </script>
-
使用效果,跟官方封装的组件比较,使用基本没一致