更新记录

1.0.2（2024-01-11）

1.迁移为uni_modules插件

1.0.1（2023-11-23）

首次提交，支持表单包含输入框、密码框、选择框、日期选择和时间选择，带必填校验和格式校验。

平台兼容性

兼容额外说明

微信小程序、支付宝小程序、钉钉小程序、H5-Safari、Android Browser、微信浏览器(Android)、QQ 浏览器(Android)、Chrome、IE、Edge、Firefox、PC-Safari 支持使用，需要引入申明使用并使用 ts 语言，因为组件使用了类型申明，其中 hya-form 中相关组件也需要引入相关依赖组件（需手动修改，配置可参考如下说明）

插件使用

• 基础用法

<hya-form ref="hyaForm" :infoList="infoList" />

• 引入数据类型

import type { FormType } from '@/uni_modules/hya-form/libs/model/index.uts';

• 申明数据

infoList: [{
    type: 'input',
    title: '手机号码',
    placeholder: '请输入手机号码',
    key: 'phone',
    value: '',
    titleIcon: 'shouji',
    titleType: 1,
    required: true,
    errMsg: '',
    disabled: false,
    rules: [
        {
            rule: '^1[3456789]\\d{9}$',
            errMsg: '请输入正确的手机码'
        }
    ]
}] as Array<FormType>

Props

hya-form

FormType

RuleType

校验规则示例

• 手机号码：^1[3456789]\\d{9}$
• 邮箱： ^\w+([-+.]\w+)@\w+([-.]\w+)\.\w+([-.]\w+)*$

ColumnType

配置额外说明

如果想在 vue3+ts 中使用支持多平台，需要加入额外的引用申明，配置如下：

• 引用组件的配置项

import hyaForm from '@/uni_modules/hya-form/components/hya-form.uvue';

export default{
    components: { hyaForm }
}

• hya-form 组件的配置项

import hyaInput from '../hya-input/hya-input.uvue';
import hyaPwd from '../hya-pwd/hya-pwd.uvue';
import hyaPicker from '../hya-picker/hya-picker.uvue';
import hyaDate from '../hya-date/hya-date.uvue';
import hyaTime from '../hya-time/hya-time.uvue';

export default {
    components: {
        hyaInput, hyaPwd, hyaPicker, hyaDate, hyaTime
    }
}

• hya-input、hya-pwd、hya-picker、hya-date、hya-time 组件的配置项

import hyaIcon from '../hya-icon/hya-icon.uvue';

export default {
    components: { hyaIcon }
}

提交

• 通过 ref 的 getFormValue()获取表单的内容，参考如下：

<hya-form :infoList="infoList" ref="hyaForm" />

获取全部数据：
let res : UTSJSONObject | null = (this.$refs['hyaForm'] as HyaFormComponentPublicInstance).getFormValue();
获取具体某一个数据：
res?.getString('area');