Skip to content

U
unidocs-zh

程序yang / unidocs-zh
与 Fork 源项目一致

Fork自 DCloud / unidocs-zh

通知 1
Star 1
Fork 0
U
unidocs-zh
提交 c3b84c0a 编写于 作者: M mehaotian
浏览文件
操作

update: uni-ui

上级 f5159f94
隐藏空白更改
内联 并排
Showing with 107 addition and 112 deletion
docs/component/uniui/uni-easyinput.md
浏览文件 @ c3b84c0a
......@@ -171,13 +171,15 @@ easyinput 组件是对原生input组件的增强 ，是专门为配合表单组
### Easyinput Events
|事件称名| 说明|返回值|
|:-:| :-:|:-:|
|@input|输入框内容发生变化时触发| -|
|@focus|输入框获得焦点时触发| -|
|@blur|输入框失去焦点时触发| -|
|@confirm|点击完成按钮时触发| -|
|@iconClick |点击图标时触发| prefix/suffix |
|事件称名| 说明|返回值|兼容说明|
|:-:| :-:|:-:|:-:|
|@input|输入框内容发生变化时触发| -||
|@clear|点击右侧叉号图标时触发| -|1.1.0新增|
|@focus|输入框获得焦点时触发| -||
|@blur|输入框失去焦点时触发| -||
|@confirm|点击完成按钮时触发| -||
|@iconClick |点击图标时触发| prefix/suffix ||
|@change|仅在输入框失去焦点或用户按下回车时触发||1.1.0新增|
## 示例
......
docs/component/uniui/uni-forms.md
浏览文件 @ c3b84c0a
......@@ -10,7 +10,7 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
然而几乎每个表单都需要做表单验证，为了方便做表单验证，减少重复开发，`uni-ui` 又基于 `<form>`组件封装了 `<uni-forms>`组件，内置了表单验证功能。
`<uni-forms>` 提供了 `rules`属性来描述校验规则、`<uni-forms-item>`子组件来包裹具体的表单项，以及给原生或三方组件提供了 `binddata()` 来设置表单值。
`<uni-forms>` 提供了 `rules`属性来描述校验规则、`<uni-forms-item>`子组件来包裹具体的表单项，以及给原生或三方组件提供了 `onFieldChange()` 来校验表单值。
每个要校验的表单项，不管input还是checkbox，都必须放在`<uni-forms-item>`组件中，且一个`<uni-forms-item>`组件只能放置一个表单项。
......@@ -22,14 +22,13 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
::: warning 注意事项
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
- 组件需要依赖 `sass` 插件 ，请自行手动安装
- `resetFields` 方法不会重置原生组件和三方组件的值
- 如果配置 `validateTrigger` 属性为 `bind` 且表单域组件使用 `input` 事件触发会耗损部分性能，请谨慎使用
- 组件支持 nvue ，需要在 `manifest.json > app-plus` 节点下配置 `"nvueStyleCompiler" : "uni-app"`
- uni-forms 中不包含其他表单组件，如需使用 uni-easyinput、uni-data-checkbox 等组件，需要自行引入
- `uni-forms` 中不包含其他表单组件，如需使用 `uni-easyinput`、`uni-data-checkbox` 等组件，需要自行引入
- `uni-forms 1.4.0 版本` 发布，请注意文档中兼容问题说明
:::
### 基本用法
`uni-forms` 组件通常用来做表单校验和提交。每一个 `uni-forms-item` 是它的一个表单域组件，用来承载表单具体内容，`uni-forms-item` 中可以嵌套 `uni-easyinput`、`uni-data-checkbox` 和 uni-app内置的表单组件 ，不过 uni-app 的内置表单组件需要通过 `binddata` 或者 `uni-forms` 提供的 `setValue` 方法，将内容与 `uni-forms` 关联，才可完成表单的校验与提交（详见后文`表单校验` 部分）
`uni-forms` 组件通常用来做表单校验和提交。每一个 `uni-forms-item` 是它的一个表单域组件，用来承载表单具体内容，`uni-forms-item` 中可以嵌套 `uni-easyinput`、`uni-data-checkbox` 和 `uni-app` 内置的表单组件
```html
<template>
......@@ -38,6 +37,9 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="年龄" name="name">
<input type="text" v-model="formData.age" placeholder="请输入年龄" />
</uni-forms-item>
<uni-forms-item required name="hobby" label="兴趣爱好">
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
</uni-forms-item>
......@@ -80,35 +82,40 @@ uni-app的内置组件已经有了 `<form>`组件，用于提交表单内容。
</uni-forms>
```
2. `uni-forms` 需要绑定`modelValue`属性，值为表单的key\value 组成的对象。
2. `uni-forms` 需要绑定`model`属性，值为表单的key\value 组成的对象。
```html
<!-- formData、rules 内容详见下方完整示例 -->
<uni-forms ref="form" :modelValue="formData" :rules="rules">
<uni-forms ref="form" :model="formData" :rules="rules">
...
</uni-forms>
```
3. `uni-forms-item` 需要设置 `name` 属性为当前字段名，字段为 `String` 类型而非变量。
3. `uni-forms-item` 需要设置 `name` 属性为当前字段名，字段为 `String|Array` 类型。
```html
<!-- formData、rules 内容详见下方完整示例 -->
<uni-forms :modelValue="formData" :rules="rules">
<uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item required name="hobby" label="兴趣爱好">
<uni-data-checkbox multiple v-model="formData.hobby" :localdata="hobby"/>
<uni-forms-item required :name="['data','hobby']" label="兴趣爱好">
<uni-data-checkbox multiple v-model="formData.data.hobby" :localdata="hobby"/>
</uni-forms-item>
</uni-forms>
```
4. 如果使用`uni-easyinput` 和 `uni-data-checkbox` 等关联组件，只需绑定 v-model，无需其他操作。
5. 如果使用原生 input、checkbox 或三方组件等，只需要给组件绑定 `binddata` 方法即可触发表单校验，无需绑定事件到 `methods` 中，见下方完整示例。
4. 只要使用的组件不管内置组件还是三方组件，只需绑定 v-model，无需其他操作，即可参与校验。
5. 如果使用原生 checkbox 或三方组件不支持 v-model 等，只需要给组件绑定 `binddata` 方法即可触发表单校验，无需绑定事件到 `methods` 中，见下方完整示例。
6. `binddata('name',$event.detail.value,'form')"` 方法接受三个值，
- 第一个参数传入当前表单组件所在的 name，同当前父组件 `uni-forms-item` 绑定属性 `name` 的值
- 第二个参数传入需要校验的值，内置组件可以通过 `$event.detail.value` 获取到组件的返回值，自定义组件传入需要校验的值即可
- 第三个参数传入 `uni-forms` 组件绑定属性 `ref` 的值，通常在多表单的时候需要传入，用来区分表单，如页面中仅有一个 `uni-forms` 可忽略
7. 如果内置 `binddata` 方法无法满足需求，在当前页面的 `methods` 中复写此方法即可，复写此方法需要调用 `uni-forms` 的 `setValue` 来触发表单校验，见下方 `setValue`方法说明
::: warning 注意
- uni-forms 1.4.0 版本后，binddata 方法不在推荐，请使用 uni-forms-item 上的 onFieldChange 方法代替
:::
**完整示例**
::: preview
......@@ -186,7 +193,7 @@ export default {
```
:::
::: danger 注意
::: danger 注意 （1.4.0后不在用这个限制，name 使用 array 类型可支持）
`modelValue` 对象目前有比较严格的格式要求：
- 尽量不要使用嵌套的数据结构，因为表单域指定的`name`值与 modeValue 的 key 是一一对应的，只有一种情况例外，那就是动态校验表单，见下方`动态校验表单`章节
:::
......@@ -202,7 +209,7 @@ export default {
|属性名|类型|说明|
|:-:|:-:|:-:|
|rules|Array|校验规则，见下方 `rules 属性说明`|
|validateTrigger| String| 表单校验时机|
|validateTrigger| String| 表单校验时机【1.4.0 已废弃】|
|label|String|当前表单域的字段中文名，多用于 `errorMessage` 的显示，可不填|
......@@ -246,7 +253,6 @@ rules: {
|minimum|Number|-|-| 校验最小值(小于) |
|maxLength|Number|-|-| 校验数据最大长度 |
|errorMessage|String|-|-|校验失败提示信息语，可添加属性占位符，当前表格内属性都可用作占位符|
|validateTrigger|String|bind| bind/submit|校验触发时机|
|validateFunction|Function|-|-|自定义校验规则 |
......@@ -280,13 +286,11 @@ rules: {
- callback : 校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可 ，如果需要显示不同的 `errMessage`，如果校验不通过需要执行 callback('提示错误信息')，如果校验通过，执行callback()即可
> **注意**
> 需要注意，如果需要使用 `validateFunction` 自定义校验规则,则不能采用 `uni-forms` 的 `rules` 属性来配置校验规则，这时候需要通过`ref`，在`onReady`生命周期调用组件的`setRules`方法绑定验证规则
> 无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。
>
::: warning 注意
- 需要注意，如果需要使用 `validateFunction` 自定义校验规则,则不能采用 `uni-forms` 的 `rules` 属性来配置校验规则，这时候需要通过`ref`，在`onReady`生命周期调用组件的`setRules`方法绑定验证规则
- 无法通过props传递变量，是因为微信小程序会过滤掉对象中的方法，导致自定义验证规则无效。
- 如果使用了 `validateFunction` 且 `request` 为 `false`的情况，表现为不填写内容不校验，有内容才校验，所以内容为空时 `validateFunction` 不会执行
:::
```html
......@@ -416,8 +420,9 @@ export default {
### 动态表单校验
`uni-forms v1.0.44` 开始增加了动态校验表单的相关内容。
::: warning 注意
- `uni-forms 1.4.0`后更新了动态校验表单的使用方式，请与之前的版本动态表单校验方式进行区分与兼容。
:::
多用于同一个字段需要添加多次的场景，如需要动态创建多个域名参与检验。
......@@ -426,7 +431,7 @@ export default {
dynamicFormData: {
email: '',
// domains 字段下会有多个结果
domains: {}
domains: []
}
```
......@@ -439,12 +444,12 @@ dynamicFormData: {
</uni-forms-item>
```
3. `name` 需要动态指定，格式为： `字段[唯一值]`
3. `name` 需要动态指定，动态表单推荐使用 Array 类型，内容从左到右为绑定值的调用链。`['domains',index,'value']` 等同于 `dynamicFormData.domains[index].value`
```html
<uni-forms-item
required
:label="item.label+' '+index"
:name="'domains[' + item.id + ']'"
:name="['domains',index,'value']"
:rules="[{'required': true,errorMessage: '域名项必填'}]"
:key="item.id"
>
......@@ -452,7 +457,7 @@ dynamicFormData: {
</uni-forms-item>
```
4. 需要绑定值的组件的 v-model 也需要动态指定，格式为：`数据源.字段[唯一值]`
4. 需要绑定值的组件的 v-model 也需要动态指定 `dynamicFormData.domains[index].value`
```html
<uni-forms-item
required
......@@ -461,7 +466,7 @@ dynamicFormData: {
:rules="[{'required': true,errorMessage: '域名项必填'}]"
:key="item.id"
>
<uni-easyinput v-model="dynamicFormData.domains[item.id]" placeholder="请输入域名" />
<uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名" />
</uni-forms-item>
```
......@@ -470,16 +475,16 @@ dynamicFormData: {
::: preview
> Template
```html
<uni-forms ref="dynamicForm" :rules="dynamicRules" :modelValue="dynamicFormData">
<uni-forms ref="dynamicForm" :rules="dynamicRules" :model="dynamicFormData">
<uni-forms-item label="邮箱" required name="email">
<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" />
</uni-forms-item>
<template v-for="(item,index) in dynamicLists">
<template v-for="(item,index) in dynamicFormData.domains">
<uni-forms-item :label="item.label+' '+index" required
:rules="[{'required': true,errorMessage: '域名项必填'}]" :key="item.id"
:name="'domains[' + item.id + ']'">
:name="['domains',index,'value']">
<view class="form-item">
<uni-easyinput v-model="dynamicFormData.domains[item.id]" placeholder="请输入域名" />
<uni-easyinput v-model="dynamicFormData.domains[index].value" placeholder="请输入域名" />
<button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
</view>
</uni-forms-item>
......@@ -500,10 +505,8 @@ export default {
// 数据源
dynamicFormData: {
email: '',
domains: {}
domains: []
},
// 动态表单数据
dynamicLists: [],
// 规则
dynamicRules: {
email: {
......@@ -521,8 +524,9 @@ export default {
methods: {
// 新增表单域
add() {
this.dynamicLists.push({
this.dynamicFormData.domains.push({
label: '域名',
value:'',
id: Date.now()
})
},
......@@ -539,31 +543,14 @@ export default {
},
}
}
// 返回值格式 ，根据自有业务，自行处理数据
{
emial:'',
domains:{
id1:'',
id2:'',
...
}
}
```
:::
::: tip 小提示
如果需要给对象赋值，需要使用 this.$set() ，将当前对象加入到可观测对象中，否则组件内无法获取正确的值
:::
### 表单校验时机说明
不管是在规则里还是`uni-forms`、`uni-forms-item`里，都有 `validateTrigger` 属性， `validateTrigger` 属性规定了表单校验时机，当前只有 `bind`、`submit` 两个值域
- `bind` ： 数据绑定时触发校验，`uni-esayinput` 、`uni-data-checkbox` 组件表现为数据发生变化时。其他内置或三方组件为 `binddata` 事件执行时机
`uni-forms 1.4.0` 后，只有 `uni-forms`上可以配置 `validateTrigger`，不在支持单独控制没个子表单的校验时机
如果需要子表单需要单独的校验时机，可以使用 `uni-forms-item` 的 `rules` 属性和 `onFieldChange` 配合
```html
<template>
......@@ -573,9 +560,9 @@ export default {
<!-- uni-easyinput 的校验时机是数据发生变化， 即触发 input 时 -->
<uni-easyinput v-model="formData.age" type="text" placeholder="请输入年龄" />
</uni-forms-item>
<uni-forms-item name="email" label="邮箱">
<!-- input 的校验时机是触发 binddata 时， 即触发 blur 时 -->
<input v-model="formData.email" @blur="binddata('email',$event.detail.value)" />
<uni-forms-item ref="input" name="email" label="邮箱">
<!-- input 的校验时机 -->
<input v-model="formData.email" @blur="(e)=>$refs.input.onFieldChange($event.detail.value)" />
</uni-forms-item>
<button class="button" @click="submit">校验表单</button>
</uni-forms>
......@@ -584,10 +571,7 @@ export default {
```
- `submit`： 只有提交表单才会触发表单校验
对于表单校验时机，同时只会有一个 `validateTrigger` 发生作用，它的作用权重为
【1.4.0后此规则已不生效】对于表单校验时机，同时只会有一个 `validateTrigger` 发生作用，它的作用权重为
**`规则 > uni-forms-item > uni-forms `**
......@@ -601,36 +585,36 @@ export default {
### Forms Props
|属性名|类型|默认值|可选值|说明|
|:-:|:-:|:-:|:-:|:-:|
|value [即将废弃]|Object|-|-| 表单数据|
|modelValue|Object|-|-| 表单数据|
|rules|Object|-|-|表单校验规则|
|validateTrigger|String|submit|bind/submit| 表单校验时机|
|label-position|String|left|top/left|label 位置|
|label-width|String/Number|75|-|label 宽度，单位 px|
|label-align|String|left| left/center/right|label 居中方式|
|err-show-type|String|undertext| undertext/toast/modal|表单错误信息提示方式|
|border|Boolean|false|-|是否显示分格线|
|属性名|类型|默认值|可选值|说明|兼容说明|
|:-:|:-:|:-:|:-:|:-:|:-:|
|model|Object|-|-|表单数据|1.4.0 新增|
|rules|Object|-|-|表单校验规则||
|validateTrigger|String|submit|bind/submit/blur| 表单校验时机,blur仅在 uni-easyinput 中生效|1.4.0 新增 blur 值|
|label-position|String|left|top/left|label 位置||
|label-width|String/Number|75|-|label 宽度，单位 px||
|label-align|String|left| left/center/right|label 居中方式||
|err-show-type|String|undertext| undertext/toast/modal|表单错误信息提示方式||
|border|Boolean|false|-|是否显示分格线||
|value|Object|-|-|表单数据，兼容vue2|即将弃用，请使用 model 代替|
|modelValue|Object|-|-| 表单数据，兼容vue3|即将弃用，请使用 model 代替|
### Forms Events
|事件称名|说明|
|:-:|:-:|
|validate|任意表单项被校验后触发，返回表单校验信息|
|@validate|任意表单项被校验后触发，返回表单校验信息|
### Forms Methods
|方法称名|说明|
|:-:| :-:|
|submit[即将废弃]| 对整个表单进行校验的方法，会返回一个 promise|
|validate|对整个表单进行校验的方法，会返回一个 promise|
|setValue|设置表单某一项 name 的对应值，通常在 uni-forms-item 和自定表单组件中使用|
|validateField|部分表单进行校验|
|clearValidate|移除表单的校验结果|
|resetFields|重置表单, 需要把 `uni-forms` 的`modelValue`属性改为 `v-model` ,且对内置组件可能不生效|
|方法称名|说明|兼容说明|
|:-:| :-:|:-:|
|setRules|动态设置表单规则||
|validate|对整个表单进行校验的方法，会返回一个 promise||
|validateField|部分表单进行校验||
|clearValidate|移除表单的校验结果||
|submit| 对整个表单进行校验的方法，会返回一个 promise|即将弃用，请使用validate代替|
|setValue|设置表单某一项 name 的对应值，通常在 uni-forms-item 和自定表单组件中使用|即将弃用，请使用 onFieldChange 兼容相关功能|
|resetFields|重置表单, 需要把 `uni-forms` 的`modelValue`属性改为 `v-model` ,且对内置组件可能不生效|1.4.0 已弃用|
### validate(keepItem:Array,callback:Function) 方法说明
`validate` 方法是对整个表单进行校验，方法接受两个参数
......@@ -640,7 +624,7 @@ export default {
|keepItem|Array|保留不参与校验的字段|
|callback|Function|校验完成返回函数|
校验成功后，校验对象只保留指定了`name`的字段（只要 ``uni-forms-item` 绑定了 `name`，哪怕不校验，也会返回），如果需要保留其他字段，则需要 `keepItem` 属性
校验成功后，校验对象只保留指定了`name`的字段（只要 `uni-forms-item` 绑定了 `name`，哪怕不校验，也会返回），如果需要保留其他字段，则需要 `keepItem` 属性
```html
......@@ -725,6 +709,10 @@ this.$refs.form.validate().then((res)=>{
### setValue(name:String,value:any) 方法说明
::: warning 注意
- uni-forms 1.4.0 后不在推荐使用 ，请使用 `onFieldChange` 代替
:::
`setValue` 方法通常用于内置组件或三方组件返回值的校验，因为`uni-esayinput` 等 uni 开头的组件内置了对 `uni-forms`的支持，所以这些组件返回的值可以直接使用，但是比如像`input` 这些内置组件值的变化，无法及时通知 `uni-forms` ，从而无法正常的校验，这时就需要我们手动将这些值加入到`uni-forms`的校验。
`setValue` 方法接受两个参数：
......@@ -778,6 +766,10 @@ export default {
### 其他方法说明
```javascript
// 设置规则
this.$refs.form.setRules({
//...
})
// 部分表单进行校验，接受一个参数，类型为 String 或 Array ，只校验传入 name 表单域的值
this.$refs.form.validateField(['name', 'email']).then((res)=>{
......@@ -798,32 +790,33 @@ this.$refs.form.clearValidate(['name', 'email'])
### FormsItem Props
|属性名|类型|默认值|可选值 |说明|
|:-:|:-:|:-:|:-:|:-:|
|name|String|-|-|表单域的属性名，在使用校验规则时必填|
|required|Boolean|false|-|label 右边显示红色"*"号，样式显示不会对校验规则产生效果|
|validateTrigger|String|submit|bind/submit|表单校验时机|
|left-icon|String|-|-| label左边的图标，限uni-ui的图标名称|
|icon-color|String|#606266|-| 左边通过icon配置的图标的颜色|
|label|String|-|-| 输入框左边的文字提示|
|label-width|Number|70|-| label的宽度，单位px|
|label-align|String|left|left/center/right|label的文字对齐方式|
|label-position|String|left|top/left|label的文字的位置|
|error-message|String|-|-|显示的错误提示内容，如果为空字符串或者false，则不显示错误信息|
|属性名|类型|默认值|可选值 |说明|兼容说明|
|:-:|:-:|:-:|:-:|:-:|:-:|
|name|String/Array|-|-|表单域的属性名，在使用校验规则时必填||
|rules| Object| -| -| 表单校验规则||
|required|Boolean|false|-|label 右边显示红色"*"号，样式显示不会对校验规则产生效果||
|label|String|-|-| 输入框左边的文字提示||
|label-width|Number|70|-| label的宽度，单位px||
|error-message|String|-|-|显示的错误提示内容，如果为空字符串或者false，则不显示错误信息||
|label-align|String|left|left/center/right|label的文字对齐方式||
|label-position|String|left|top/left|label的文字的位置|1.4.0已弃用 ，统一使用 uni-forms 的对齐方式|
|validateTrigger|String|submit|bind/submit|表单校验时机|1.4.0已弃用，统一使用 uni-forms 的校验时机|
|left-icon|String|-|-| label左边的图标，限uni-ui的图标名称|1.4.0已弃用 ，请使用 #label 插槽实现相关功能|
|icon-color|String|#606266|-| 左边通过icon配置的图标的颜色|1.4.0已弃用 ，请使用 #label 插槽实现相关功能|
### FormsItem Methods
|方法称名|说明|兼容说明|
|:-:| :-:|:-:|
|setRules|动态设置表单规则||
|onFieldChange|校验子表单|1.4.0新增|
### FormsItem Slots
|插槽名|说明|
|:-:| :-:|
|default|默认插槽|
|left(已经失效，请使用label代替)|label插槽，自定义label显示内容|
|label|label插槽，自定义label显示内容|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件，直接拷贝示例代码将无法正常运行 。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或