更新记录
v1.0.4(2024-01-18) 下载此版本
1.0.4(2023-03-28)
添加表单类型
1.0.5(2023-04-11)
添加输入框类型
1.0.3(2023-03-22)
添加picker输入类型
1.0.2(2023-03-17)
1、添加必要参数 2、修复双向数据绑定问题 3、增加表单类型 4、增加具名插槽right ,可替换右侧箭头
1.0.1(2023-03-17)
添加组件使用文档
1.0.0(2023-03-16)
初步封装表单项,带验证
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | √ | - | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
h-form-item
组件说明
-
封装了表单验证以及短线分隔线
-
微信小程序组件不能使用+号选择器,原因可能是微信小程序在引用组件的地方,以组件名为标签名,在组件外层套了一个标签,导致+选择器失效
-
支持匿名slot,不支持具名slot,需要的可以自己修改
参数说明
参数名 参数类型 默认值 参数说明 是否必传 label String 无 表单项名称 是 v-model string 无 双向数据绑定的值 否 required Boolean false 必填项校验 否 errorMessage Boolean label+'不能为空' 必填项未校验通过时显示的错误信息 否 placeholder string 请输入+label 表单提示信息 否 showLine Boolean true 是否显示分隔线 否 showArrow Boolean true 是否显示右侧箭头 否 rules Array [] 校验规则 否 maxlength Number -1 最大输入长度 否 type String text 表单类型,暂时支持text、textarea、password,对picker和upload的支持会在之后完成 否 readOnly Boolean false 只读状态显示 否 disabled Boolean false 是否禁用 否 -
rules 参数说明:传递一个如下所示的对象数组
const rules = [ validate:(value)=>{value?true:false}, // 校验方法,返回布尔值。通过返回true message:'value不能为空' // 错误信息 ]
事件说明
事件名称 事件说明 备注 blur 表单原生事件 focus 表单原生事件 input 表单原生事件 click 点击事件 组件点击事件 rightClick 点击右侧箭头事件 只对右侧箭头生效