表单-LdForm

TIP

LdForm 的底层是使用 element-plus 的 el-form 实现的

对比el-form，该组件增强了验证交互，减少验证所需传参

简单使用

示例

tsx

// 表单数据
const form = reactive({
  name: "",
});

return () => (
  <>
    <LdForm model={form}>
      <LdFormItem label="姓名">
        <ElInput v-model={form.name}></ElInput>
      </LdFormItem>
    </LdForm>
  </>
);

// 表单数据
const form = reactive({
  name: "",
});

return () => (
  <>
    <LdForm model={form}>
      <LdFormItem label="姓名">
        <ElInput v-model={form.name}></ElInput>
      </LdFormItem>
    </LdForm>
  </>
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

通过工具实现表单验证

示例效果：

验证不通过：

图12

验证通过：

图13

示例代码：

tsx

// 表单数据
const form = reactive({
  name: "",
});

const formRef = ref();
/** 表单工具 */
const fTool = formTool(form);
/** 验证工具 */
const formValidate = useFormValidate({ formRef: () => formRef });

return () => (
  <>
    {formValidate.errorDom}
    <LdForm model={form} ref={formRef}>
      <LdFormItem
        label="姓名"
        required
        prop={fTool.getProp("name")}
        v-slots={{
          default: (query: any) => {
            return (
              <>
                <ElInput
                  clearable
                  placeholder={`请输入${query.label}`}
                  {...fTool.share(query)}
                />
              </>
            );
          },
        }}
      />
    </LdForm>

    <ElButton
      onClick={async () => {
        // 验证表单
        await formValidate.validate();
        // 验证通过后执行代码
      }}
    >验证表单</ElButton>
  </>
);

// 表单数据
const form = reactive({
  name: "",
});

const formRef = ref();
/** 表单工具 */
const fTool = formTool(form);
/** 验证工具 */
const formValidate = useFormValidate({ formRef: () => formRef });

return () => (
  <>
    {formValidate.errorDom}
    <LdForm model={form} ref={formRef}>
      <LdFormItem
        label="姓名"
        required
        prop={fTool.getProp("name")}
        v-slots={{
          default: (query: any) => {
            return (
              <>
                <ElInput
                  clearable
                  placeholder={`请输入${query.label}`}
                  {...fTool.share(query)}
                />
              </>
            );
          },
        }}
      />
    </LdForm>

    <ElButton
      onClick={async () => {
        // 验证表单
        await formValidate.validate();
        // 验证通过后执行代码
      }}
    >验证表单</ElButton>
  </>
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

表单-LdForm #

简单使用 #

通过工具实现表单验证 #

表单-LdForm

简单使用

通过工具实现表单验证