自定义组件使用

展示 ProForm 中使用自定义组件的两种方式。

两种使用方式

1. 在 Field.component 里直接传组件
2. 使用 ProForm 插槽（同名 path）覆盖渲染

当同字段同时存在两种方式时，插槽优先级更高。

表单展示

自定义组件使用示例

姓氏

名字

表单数据对象：{}

代码实现

<script lang="ts" setup>
import { markRaw } from 'vue';
import { ElCard, ElSpace, ElButton } from 'element-plus';
import { ProForm, useForm } from '@qin-ui/element-plus-pro';
import CustomInput from './CustomInput.vue';

type FormData = {
  firstName: string;
  lastName: string;
};

const form = useForm<FormData>({}, [
  {
    label: '姓氏',
    path: 'firstName',
    component: markRaw(CustomInput),
    placeholder: '请输入姓氏',
  },
  {
    label: '名字',
    path: 'lastName',
    placeholder: '请输入名字',
  },
]);

const { formRef, formData } = form;

const reset = () => {
  formRef.value?.resetFields();
};

const submit = async () => {
  await formRef.value?.validate();
  console.log('表单提交数据:', { ...formData });
};
</script>

<template>
  <ElCard header="自定义组件使用示例">
    <ProForm :form="form">
      <template #lastName="scoped">
        <CustomInput v-bind="scoped" />
      </template>
      <ElSpace>
        <ElButton @click="reset">重置表单</ElButton>
        <ElButton type="primary" native-type="submit" @click="submit">
          提交
        </ElButton>
      </ElSpace>
    </ProForm>
    <br />
    <div style="white-space: pre">表单数据对象：{{ formData }}</div>
  </ElCard>
</template>

CustomInput 代码实现

<script lang="ts" setup>
const value = defineModel<string>({ default: '' });
</script>

<template>
  <input
    type="text"
    class="input"
    v-bind="$attrs"
    :value="value"
    @input="e => (value = (e.target as HTMLInputElement)?.value || '')"
  />
</template>

<style scoped>
.input {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  outline: none;
}

.input:focus {
  border-color: #409eff;
}
</style>