基于input二次封装，怎么在form中使用

[Atw-Lee]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

^4.2.3

Environment

OS: macOS 14.6.1， Chrome: 128.0.6613.85，Vue ^3.4.31

Reproduction link

Steps to reproduce

当我基于input二次开发，在form表单里使用，双向绑定数据显示不正常

What is expected?

正常显示

What is actually happening?

错误显示

[Atw-Lee]

这是我二次封装的input，其实什么也没有做。

<template>
  <Input v-bind="props" ref="inputRef">
    <template
      v-for="(_, key, index) in $slots"
      :key="index"
      #[key]="slotsProps"
    >
      <slot :name="key" v-bind="slotsProps" v-if="slotsProps"></slot>
      <slot :name="key" v-else></slot>
    </template>
  </Input>
</template>

<script setup lang="ts">
import { Input } from "ant-design-vue";
import type { InputProps } from "./type";
import { ref } from "vue";
defineOptions({
  name: "PsInput",
});
const inputRef = ref();
defineExpose({
  blur: () => {
    inputRef.value.blur();
  },
  focus: () => {
    inputRef.value.focus();
  },
});

const props = withDefaults(defineProps<InputProps>(), {
  bordered: undefined,
  allowClear: undefined,
});
</script>

我在form中这么使用

    <Form
      ref="formRef"
      :model="formState"
      class="flex-grow-1 p-6"
      autocomplete="off"
    >
      <div class="osp-item-row">
        <FormItem
          label="菜单名称"
          name="name"
          :rules="[{ required: true, message: '请输入菜单名称！' }]"
        >
          <MyInput v-model:value="formState.name" />
        </FormItem>
        <Button
          @click="
            () => {
              formRef.validate();
            }
          "
          >Submit</Button
        >
      </div>
    </Form>

const formState = ref({ name: "哈哈哈" });

[Atw-Lee]

找到了文档上关于二次封装自定义相关的文章

我需要像文档示例中介绍的一样，给每个我封装的组件加上form相关的代码吗。我感觉这样有点脑壳疼。

[Atw-Lee]

我还找到了类似的一个issues

autoLink取消关联，确实双向绑定正常了，但是把校验打开又不正常了。

<FormItem
          label="菜单名称"
          name="name"
          :rules="[{ required: true, message: '请输入菜单名称！' }]"
          ref="nameRef"
        >
          <MyInput
            v-model:value="formState.name"
            @change="
              () => {
                console.log('$refs', $refs);
                $refs.nameRef.onFieldChange();
              }
            "
          />
        </FormItem>

[Atw-Lee]

Screen.Recording.2024-08-29.at.22.14.09.mov

[Atw-Lee]

很多组件都进行了二次开发，关于集成到form中的方案，请问您有什么建议吗。

[Atw-Lee]

是不是我的方向错了，比如select的操作就显得一切正常

[Atw-Lee]

查找input汉字相关的issuse，找到了lazy属性解决啦。但我不知道为什么，有wiki可以让我了解一下吗