Vue3 Antd 的 AFrom 中自定义 a-form-item 组件

前言: 在 antd 中 a-from 组件下面的 a-form-item, 只能添加一个 a-input, 如果出现二个, 那么重置功能就不能用, 多个的取值也有问题. 下面是实现一个自定义组件, 让他多个组件, 合成一个组件.

不多多, 直接上代码.

<template>
    <a-input-group compact>
        <a-input-number :controls="false" allowClear v-model:value="internalValue[0]" @change="updateRangeOne"
            style="width: 50%" addon-after="-" />
        <a-input-number :controls="false" allowClear v-model:value="internalValue[1]" @change="updateRangeTwo"
            style="width: 50%" />
    </a-input-group>
</template>

<script lang="ts" setup>
import { ref, toRefs, watch } from 'vue'
import { Form } from 'ant-design-vue';

// 解决 Form.Item 下多个 input 冲突问题, 合并成一个
const _ = Form.useInjectFormItemContext();
// update:modelValue 命名在 Vue 3 中是有特殊用途的，用于支持 v-model 的双向数据绑定
const emit = defineEmits(['update:modelValue'])
// 接收外部数据源
const props = defineProps({
    modelValue: { type: Array, required: true, default: [null, null] }
})
const { modelValue } = toRefs(props)
// 转为内部数据源
const internalValue = ref(modelValue?.value?.slice())
// 监听外部数据源, 并转为内部数据源
watch(
    () => modelValue?.value,
    (newVal, oldVal) => {
        if (newVal) {
            internalValue.value = newVal.slice()
        }
    }
)
// 传回给父组件
const updateRangeOne = (value: any) => {
    if (value) {
        internalValue.value[0] = value
        emit('update:modelValue', internalValue.value.slice())
    }
}

// 传回给父组件
const updateRangeTwo = (value: any) => {
    if (value) {
        internalValue.value[1] = value
        emit('update:modelValue', internalValue.value.slice())
    }
}

</script>

关键点: update:modelValue 命名在 Vue 3 中是有特殊用途的，用于支持 v-model 的双向数据绑定