华玥组件库

中文

English

中文

English

Appearance

FormGroup 表单组件 ​

此组件一般用于快速搭建表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。

📌平台差异说明 ​

APP(vue)H5微信小程序支付宝小程序
✔✔✔✔

🏯基本使用示例 ​

html
<!-- 全局使用 -->
<hy-form-group :columns="columns" :formData="formData"></hy-form-group>
ts
import { reactive, ref } from 'vue';
import { HyWarn, FormTypeEnum } from 'hy-app';
import type { FormColumnsType } from 'hy-app';

const formData: AnyObject = reactive({
    custom: '自定义值',
    isShow: true,
    sex: '1',
});
const formRef = ref<InstanceType<typeof HyForm>>(null);

const columns: FormColumnsType[] = reactive([
    {
        field: 'name',
        label: '名字',
        type: FormTypeEnum.TEXT,
        rules: {
            required: true,
            message: '没有填内容',
            trigger: ['blur'],
        },
    },
    {
        field: 'sex',
        label: '性别',
        type: FormTypeEnum.RADIO,
        actions: [
            { label: '女', value: '0' },
            { label: '男', value: '1' },
        ],
        rules: {
            required: true,
            message: '没有填内容',
            trigger: ['blur', 'change'],
        },
    },
    {
        field: 'phone',
        label: '手机号',
        type: FormTypeEnum.TEXT,
        rules: [
            {
                required: true,
                message: '请输入您的手机号',
                trigger: ['blur', 'change'],
            },
            {
                type: 'phone',
                trigger: ['blur', 'change'],
            },
        ],
    },
    {
        field: 'password',
        label: '密码',
        type: FormTypeEnum.PASSWORD,
        rules: {
            type: 'password',
            trigger: ['blur', 'change'],
        },
    },
    {
        field: 'isShow',
        label: '是否禁用',
        type: FormTypeEnum.SWITCH,
    },
    {
        field: 'time',
        label: '日期',
        type: FormTypeEnum.DATE,
        border: 'bottom',
        rules: {
            required: true,
            message: '请输入您的日期',
            trigger: ['blur', 'change'],
        },
    },
    {
        field: 'address',
        label: '地址',
        type: FormTypeEnum.ADDRESS,
        rules: {
            required: true,
            message: '请输入您的地址',
            trigger: ['blur', 'change'],
        },
    },
    {
        field: 'select',
        label: '选择学历',
        type: FormTypeEnum.SELECT,
        select: [
            [
                { text: '小学', id: '1' },
                { text: '初中', id: '2' },
                { text: '高中', id: '3' },
                { text: '大学', id: '4' },
            ],
        ],
        rules: {
            required: true,
            message: '请输入您的学历',
            trigger: ['blur', 'change'],
        },
    },
    {
        field: 'age',
        label: '年龄',
        type: FormTypeEnum.NUMBER,
        rules: [
            {
                required: true,
                message: '请输入您的年龄',
                trigger: ['blur', 'change'],
            },
            {
                required: true,
                message: '不能小于最小值',
                min: 10,
                trigger: ['blur', 'change'],
            },
            {
                message: '不能大于最大值',
                max: 20,
                trigger: ['change'],
            },
        ],
    },
    {
        field: 'remark',
        label: '备注',
        type: FormTypeEnum.TEXTAREA,
        rules: {
            required: true,
            message: '请输入您的地址',
            trigger: ['blur', 'change'],
        },
    },
]);

const handleSubmit = () => {
    formRef.value.submit().then((res) => {
        console.log(res);
    });
};

自定义插槽 ​

说明

微信小程序差异微信小程序不能动态设置插槽，所以不支持自定义插槽，后续有其他方法会更新文档

vue
<template>
    <hy-form ref="formRef" :columns="columns" :form-data="formData" labelWidth="90">
        <template #custom="{ record, errorStyle }">
            <hy-input v-model="formData[record.field]" :custom-style="errorStyle"></hy-input>
        </template>
    </hy-form>
</template>
ts
import { reactive } from 'vue';
import { FormTypeEnum, HyForm, HyInput } from 'hy-app';
import type { FormColumnsType } from 'hy-app';

const columns: FormColumnsType[] = reactive([
    {
        field: 'custom',
        label: '自定义内容',
        type: FormTypeEnum.CUSTOM,
        rules: {
            required: true,
            message: '请输入您的自定义内容',
            trigger: ['blur', 'change'],
        },
    },
]);

API ​

参数说明类型默认值
columns表单字段配置array-
formData表单值object-
labelPosition表单label的位置left|topleft
labelWidthlabel 宽度string|numberauto
right输入值是否右对齐booleanfalse
labelAlignlabel 字体的对齐方式left|center|rightleft
border显示表单单行底部下划线booleanfalse
disabled禁用表单[1]booleanfalse
input输入框属性api集合HyInputProps-
textarea文本域属性api集合HyTextareaProps-
picker选择器属性api集合HyPickerProps-
switchItem开关属性api集合HySwitchProps-
radio单选属性api集合HyRadioProps-
checkButton选择按钮属性api集合HyCheckButtonProps-

columns ​

参数说明类型默认值
label文字描述string-
field字段名string-
right内容右固定boolean-
type表单类型(见下面枚举出来字段)。enum-
maxCount文件上传最大数（type 为 upload 时候）number-
select选择器配置数据集合[2]string[][]|{text:string;id:string}[][]-
actions单选框配置数据集合[3]string-
mode日期展示的格式（type 等于 date 选填）enum-
rules校验规则object|array-
input输入框属性api集合HyInputProps-
textarea文本域属性api集合HyTextareaProps-
picker选择器属性api集合HyPickerProps-
switchItem开关属性api集合HySwitchProps-
radio单选属性api集合HyRadioProps-
checkButton选择按钮属性api集合HyCheckButtonProps-

actions ​

参数说明类型默认值
label显示文本内容string-
value获取的值string|number-
checked是否选中boolean-
disabled是否禁用boolean-

rules ​

参数说明类型默认值
required是否必填boolean-
message校验不通过时的提示信息string-
trigger表单事件校验(blur|change)[]-
min最小输入内容个数number-
max最大输入内容个数number-
type手机号校验、邮箱校验、复杂密码校验phone|email|password-
validator自定义校验规则Function-

type 类型 ​

  • UPLOAD 上传文件
  • TEXT 普通输入框
  • NUMBER 数字输入框
  • PASSWORD 密码输入框
  • ID_CARD 身份证 id 输入框
  • RADIO 单选
  • DATE 时间选择器
  • SELECT 选择器
  • ADDRESS 地址选择器
  • SWITCH 开关
  • DETAIL 详情
  • TEXTAREA 文本域
  • CUSTOM 自定义插槽

mode 类型 ​

  • DATETIME yyyy-MM-dd HH:mm:SS
  • DATE yyyy-MM-dd
  • TIME hh:MM:ss
  • YEAR_MONTH yyyy-MM
  • MONTH_DAY MM-dd
  • HOUR_MINUTE HH:mm
  • MINUTE_SECOND mm:SS

Methods ​

方法名说明参数
validate验证表单-
resetFields重置表单-
clearValidate清除验证(fields?: string[])
submit提交表单-
03:29

  1. 这个禁用优先级高于columns里面的disabled ↩︎

  2. type = select 时候必填(参考 HyPicker 组件) ↩︎

  3. type = radio 时候必填(参考 HyRadio 组件) ↩︎