From 296aa04e24e870a4cea37facafcb0b2a917bd043 Mon Sep 17 00:00:00 2001 From: DiamondYuan Date: Tue, 28 Nov 2023 10:40:08 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20form-input=20?= =?UTF-8?q?=E7=BC=BA=E5=A4=B1=20alwaysSystem=20=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- compiled/alipay/src/Calendar/index.md | 72 ++++++- compiled/alipay/src/Form/FormInput/index.axml | 3 +- compiled/alipay/src/Form/index.md | 186 +++++++++++------- compiled/wechat/src/Calendar/index.md | 72 ++++++- src/Form/FormInput/index.axml | 3 +- 5 files changed, 259 insertions(+), 77 deletions(-) diff --git a/compiled/alipay/src/Calendar/index.md b/compiled/alipay/src/Calendar/index.md index d87c6d876..fc814fffd 100644 --- a/compiled/alipay/src/Calendar/index.md +++ b/compiled/alipay/src/Calendar/index.md @@ -22,7 +22,7 @@ toc: 'content' | 属性 | 说明 | 类型 | 默认值 | | ------------- | ----------------------------------------------- | ----------------------------------------------------------- | ----------- | | defaultValue | 初始值 | CalendarValue | 无 | -| value | 日历选择的日期，传入后即为受控模式 | CalendarValue | 无 | +| value | 日历选择的日期，传入后即为受控模式 | CalendarValue | 无 | | selectionMode | 设置选择模式，单选或者连续区间，默认为 'range' | `single` \| `range` | 'range' | | monthRange | 月份范围，默认为最近 3 个月 | `[number, number]` | 最近 3 个月 | | weekStartsOn | 星期栏，以周几作为第一天显示。默认为 'Sunday'。 | 'Sunday' \| 'Monday' | 'Sunday' | @@ -96,3 +96,73 @@ interface LocaleText { end: string; } ``` + +## FAQ + +### 如何设置默认的开始与结束时间 ？ + +通过 `defaultValue` 设置默认的时间。 `defaultValue` 的类型为 CalendarValue。 + +CalendarValue 的类型为 `number | [number,number]`，代表单选或者连续区间的日期。 是一个时间戳，单位为毫秒。 + +举个例子，如果我们想要设置默认的开始时间为今天，结束时间为 7 天后，所以我们可以在 defaultValue 内传入 + +```ts +[dayjs().startOf('date'), dayjs().add(7, 'days').startOf('date')]; +``` + +### 通过 `onFormatter` 设置单元格的自定义数据 + +我们可以通过 `onFormatter` 设置单元格的自定义数据， `onFormatter` 的格式为 `(cell: CellState, currentValue: CalendarValue) => CellState`。 + +我们会调用每一个单元格的状态，以及当前的 value。 通过返回新的单元格数据，我们可以设置单元格的状态。 + +下面是一些常见的用例 + +#### 如何让当天之前的时间不可选？ + +支付宝小程序，我们可以通过 page 上的方法来设置，在 wxml 里需要传入一个方法名字符串。 + +axml: + +```xml + +``` + +ts: + +```ts +import dayjs from 'dayjs'; + +Page({ + handleFormat(cell: CellState) { + return { + // 如果 cell 的时间小于今天的开始时间，那么就禁止选择 + disabled: dayjs(cell.time).isBefore(dayjs().startOf('date')), + }; + }, +}); +``` + +支付宝小程序，我们可以通过 data 里的方法来设置。 在 wxml 里需要传入一个变量名。 + +wxml: + +```xml + +``` + +```ts +import dayjs from 'dayjs'; + +Page({ + data: { + handleFormat: (cell: CellState) => { + return { + // 如果 cell 的时间小于今天的开始时间，那么就禁止选择 + disabled: dayjs(cell.time).isBefore(dayjs().startOf('date')), + }; + }, + }, +}); +``` diff --git a/compiled/alipay/src/Form/FormInput/index.axml b/compiled/alipay/src/Form/FormInput/index.axml index 646b5c981..7006bcc41 100644 --- a/compiled/alipay/src/Form/FormInput/index.axml +++ b/compiled/alipay/src/Form/FormInput/index.axml @@ -21,6 +21,7 @@ type="{{type}}" password="{{password}}" placeholder="{{placeholder}}" + alwaysSystem="{{alwaysSystem}}" placeholderClassName="{{placeholderClassName}}" placeholderStyle="{{placeholderStyle}}" maxLength="{{maxLength}}" @@ -49,4 +50,4 @@ - \ No newline at end of file + diff --git a/compiled/alipay/src/Form/index.md b/compiled/alipay/src/Form/index.md index 5cf709fc3..477cbff87 100644 --- a/compiled/alipay/src/Form/index.md +++ b/compiled/alipay/src/Form/index.md @@ -11,118 +11,135 @@ toc: 'content' -Form 表单。包含数据录入、校验以及对应样式。Form组件需要 [component2](https://opendocs.alipay.com/mini/framework/custom-component-overview)。 - +Form 表单。包含数据录入、校验以及对应样式。Form 组件需要 [component2](https://opendocs.alipay.com/mini/framework/custom-component-overview)。 ## 何时使用 + - 用于创建一个实体或收集信息 - 需要对输入的数据类型进行校验时 - ## 代码示例 ### 基本使用 + ### 布局 + ### 初始值 + ### 初始值异步加载 + ### 表单侦听 + ### 校验 + ### 增加删除表单项 + ### 表单项联动 + ### 自定义表单项校验 + ### 自定义表单校验消息 + ### 多个表单 + ### 图片校验 + -### json生成表单 +### json 生成表单 + ### 自定义错误样式 -使用validateStatus: success 及 footer slot 来自定义错误样式。 + +使用 validateStatus: success 及 footer slot 来自定义错误样式。 ### 自定义表单项 + 通过使用 [FormItem](#formitem)、[createForm](#createform) 可自定义表单项。示例里 `form-checklist`, `form-location` 为自定义表单项组件。 - ## API ### FormItem -所有Form组件都包括的属性 +所有 Form 组件都包括的属性 | 属性 | 说明 | 类型 | 默认值 | | -----|-----|-----|-----| | dependencies | 设置依赖字段，查看[详细说明](#dependencies) | string[] | - | -| footer | 底部slot，接收errors、status | slot | - | +| footer | 底部 slot，接收 errors、status | slot | - | | name | 名称 | string | - | | label | 文本 | string | - | | labelWidth | 文本宽度 | string | - | | position | 布局，可选 `horizontal` `vertical` | string | horizontal | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选 `default` `success` `error` `validating` | string | - | | help | 提示信息，如不设置，则会根据校验规则自动生成 | string | - | -| header | 顶部slot，接收errors、status | slot | - | +| header | 顶部 slot，接收 errors、status | slot | - | | tooltip | 表单项提示信息 | string | - | | required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | | message | 校验错误信息。如不设置，则会根据校验规则自动生成 | string | false | | requiredMark | 必填选填的标记样式，可选 `asterisk` `text-required` `text-optional` | string | asterisk | - ### Form -| 属性 | 说明 | 类型 | -| -----|-----|-----| -| rules | 可选，校验规则 | 查看[rules](#rules) | -| initialValues | 可选，初始值 | Record | -| validateMessages | 可选，校验消息。| 查看[validateMessages](#validatemessages) | - -### Form实例方法 -| 属性 | 说明 | 类型 | -| -----|-----|-----| -| addItem | 添加表单项 | (formItem: Ref) => void | -| getFieldValue | 得到表单项的值 | (name: string) => any | -| getFieldsValue | 获取一组字段名对应的值。不传nameList则返回全部fields对 | (nameList?: string[]) => Record | -| getFieldValidatorStatus | 得到表单校验状态 | (name: string) => [ValidatorStatus](#validatorstatus) | -| getFieldsValidatorStatus | 得到一组表单校验状态。。不传nameList则返回全部fields对 | (nameList?: string[]) => Record | -| reset | 重置表单为初始值 | () => void | -| isFieldTouched | 判断表单项是否被修改过 | () => boolean | -| onValueChange | 侦听指定表单项的值修改，查看[详细说明](#onvaluechangeonvalueschange) | (name: string, (changedValue: any, allValues: Record) => void) => void | -| onValuesChange | 侦听表单项的值修改，查看[详细说明](#onvaluechangeonvalueschange) | ((changedValues: Record, allValues: Record) => void) => void | -| setFieldValue | 设置表单项的值 | (name: string, value: any) => void; | -| setFieldsValue | 设置表单项的值 | (values: Record) => void; | -| setFieldValidatorStatus | 设置表单校验状态 | (name: string, validatorStatus: [ValidatorStatus](#validatorstatus)) => void | -| setFieldsValidatorStatus | 设置一组表单校验状态 | (fieldsValidatorStatus: Record) => void | -| setInitialValues | 设置表单初始值 | (initialValues: Record) => void | -| submit | 提交表单，返回promise表单值，校验错误会抛出 | () => Promise> | + +| 属性 | 说明 | 类型 | +| ---------------- | ---------------- | ----------------------------------------- | +| rules | 可选，校验规则 | 查看[rules](#rules) | +| initialValues | 可选，初始值 | Record | +| validateMessages | 可选，校验消息。 | 查看[validateMessages](#validatemessages) | + +### Form 实例方法 + +| 属性 | 说明 | 类型 | +| ------------------------ | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| addItem | 添加表单项 | (formItem: Ref) => void | +| updateRules | 更新 form 的校验规则, 每次都需要传入全量的 rules | (rules:Rules) =>void, Rules 的类型可以看[rules](#rules) | +| getFieldValue | 得到表单项的值 | (name: string) => any | +| getFieldsValue | 获取一组字段名对应的值。不传 nameList 则返回全部 fields 对 | (nameList?: string[]) => Record | +| getFieldValidatorStatus | 得到表单校验状态 | (name: string) => [ValidatorStatus](#validatorstatus) | +| getFieldsValidatorStatus | 得到一组表单校验状态。。不传 nameList 则返回全部 fields 对 | (nameList?: string[]) => Record | +| reset | 重置表单为初始值 | () => void | +| isFieldTouched | 判断表单项是否被修改过 | () => boolean | +| onValueChange | 侦听指定表单项的值修改，查看[详细说明](#onvaluechangeonvalueschange) | (name: string, (changedValue: any, allValues: Record) => void) => void | +| onValuesChange | 侦听表单项的值修改，查看[详细说明](#onvaluechangeonvalueschange) | ((changedValues: Record, allValues: Record) => void) => void | +| setFieldValue | 设置表单项的值 | (name: string, value: any) => void; | +| setFieldsValue | 设置表单项的值 | (values: Record) => void; | +| setFieldValidatorStatus | 设置表单校验状态 | (name: string, validatorStatus: [ValidatorStatus](#validatorstatus)) => void | +| setFieldsValidatorStatus | 设置一组表单校验状态 | (fieldsValidatorStatus: Record) => void | +| setInitialValues | 设置表单初始值 | (initialValues: Record) => void | +| submit | 提交表单，返回 promise 表单值，校验错误会抛出 | () => Promise> | ### dependencies -当字段间存在依赖关系时使用。如果一个字段设置了 dependencies 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 dependencies 后，“密码”字段更新会重新触发“校验密码”的校验。 +当字段间存在依赖关系时使用。如果一个字段设置了 dependencies 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 dependencies 后，“密码”字段更新会重新触发“校验密码”的校验。 ### rules + 示例： + ```js { account: [ @@ -153,7 +170,7 @@ Form 表单。包含数据录入、校验以及对应样式。Form组件需要 [ } ``` -rules可以在new Form里设置，还可以在FormItem里通过 `required`, `message` 属性加上。 +rules 可以在 new Form 里设置，还可以在 FormItem 里通过 `required`, `message` 属性加上。 ```html { +const onValuesChangeCallback = (changedValues) => { console.log(changedValues); }; this.form.onValuesChange(onValuesChangeCallback); @@ -197,15 +218,16 @@ onValuesChangeCallback({ ``` ### ValidatorStatus + ```js type ValidatorStatus = { - status: 'default' | 'success' | 'error' | 'validating'; - errors: string[]; -} + status: 'default' | 'success' | 'error' | 'validating', + errors: string[], +}; ``` - ### submit 校验抛出错误 + ```js { values: Record @@ -217,78 +239,92 @@ type ValidatorStatus = { ``` ### FormInput + 同 Input ### FormTextarea + 同 Textarea ### FormSwitch + 同 Switch ### FormStepper + 同 Stepper，添加： -| 属性 | 说明 | 类型 | 默认值 | -| -----|-----|-----|-----| -| stepperClassName | 对应Stepper组件className | string | - | -| stepperStyle | 对应Stepper组件style | string | - | +| 属性 | 说明 | 类型 | 默认值 | +| ---------------- | --------------------------- | ------ | ------ | +| stepperClassName | 对应 Stepper 组件 className | string | - | +| stepperStyle | 对应 Stepper 组件 style | string | - | ### FormCheckGroup + 同 CheckGroup，添加： -| 属性 | 说明 | 类型 | 默认值 | -| -----|-----|-----|-----| -| checkboxLabel | 对应CheckGroup组件label | slot | - | -| checkboxPosition | 对应CheckGroup组件position | string | - | +| 属性 | 说明 | 类型 | 默认值 | +| ---------------- | ----------------------------- | ------ | ------ | +| checkboxLabel | 对应 CheckGroup 组件 label | slot | - | +| checkboxPosition | 对应 CheckGroup 组件 position | string | - | ### FormRadioGroup + 同 RadioGroup，添加： -| 属性 | 说明 | 类型 | 默认值 | -| -----|-----|-----|-----| -| radioLabel | 对应RadioGroup组件label | slot | - | -| radioPosition | 对应RadioGroup组件position | string | - | +| 属性 | 说明 | 类型 | 默认值 | +| ------------- | ----------------------------- | ------ | ------ | +| radioLabel | 对应 RadioGroup 组件 label | slot | - | +| radioPosition | 对应 RadioGroup 组件 position | string | - | ### FormPicker + 同 Picker，添加： -| 属性 | 说明 | 类型 | 默认值 | -| -----|-----|-----|-----| -| arrow | 右侧箭头，可选`right` `up` `down`，传true为`right` | string \| boolean | - | +| 属性 | 说明 | 类型 | 默认值 | +| ----- | ---------------------------------------------------- | ----------------- | ------ | +| arrow | 右侧箭头，可选`right` `up` `down`，传 true 为`right` | string \| boolean | - | ### FormDatePicker + 同 DatePicker，添加： -| 属性 | 说明 | 类型 | 默认值 | -| -----|-----|-----|-----| -| arrow | 右侧箭头，可选`right` `up` `down`，传true为`right` | string \| boolean | - | +| 属性 | 说明 | 类型 | 默认值 | +| ----- | ---------------------------------------------------- | ----------------- | ------ | +| arrow | 右侧箭头，可选`right` `up` `down`，传 true 为`right` | string \| boolean | - | ### FormRangePicker + 同 RangePicker，添加： -| 属性 | 说明 | 类型 | 默认值 | -| -----|-----|-----|-----| -| arrow | 右侧箭头，可选`right` `up` `down`，传true为`right` | string \| boolean | - | +| 属性 | 说明 | 类型 | 默认值 | +| ----- | ---------------------------------------------------- | ----------------- | ------ | +| arrow | 右侧箭头，可选`right` `up` `down`，传 true 为`right` | string \| boolean | - | ### FormCascaderPicker + 同 CascaderPicker，添加： -| 属性 | 说明 | 类型 | 默认值 | -| -----|-----|-----|-----| -| arrow | 右侧箭头，可选`right` `up` `down`，传true为`right` | string \| boolean | - | +| 属性 | 说明 | 类型 | 默认值 | +| ----- | ---------------------------------------------------- | ----------------- | ------ | +| arrow | 右侧箭头，可选`right` `up` `down`，传 true 为`right` | string \| boolean | - | ### FormSlider + 同 Slider ### FormSelector + 同 Selector ### FormImageUpload + 同 ImageUpload ### createForm -createForm是一个mixin，在自定义表单项使用 +createForm 是一个 mixin，在自定义表单项使用 + ```js import { createForm } from 'antd-mini/es/Form/form'; @@ -297,13 +333,15 @@ Component({ methods: { onChange(value) { this.emit('onChange', value); - } - } -}) + }, + }, +}); ``` -createForm会在Component加上 +createForm 会在 Component 加上 + - data + ```js { formData: { @@ -313,10 +351,12 @@ createForm会在Component加上 }, } ``` + - methods + ```js // 表单项修改需要调用emit方法。需要自定义表单项组件在值修改去调用。 function emit(trigger: 'onChange' | 'onBlur' | 'onFocus' , value: any): void; ``` -更多方法可查看createForm方法。使用`formData`, `emit` 即可完成自定义表单项。 +更多方法可查看 createForm 方法。使用`formData`, `emit` 即可完成自定义表单项。 diff --git a/compiled/wechat/src/Calendar/index.md b/compiled/wechat/src/Calendar/index.md index d87c6d876..fc814fffd 100644 --- a/compiled/wechat/src/Calendar/index.md +++ b/compiled/wechat/src/Calendar/index.md @@ -22,7 +22,7 @@ toc: 'content' | 属性 | 说明 | 类型 | 默认值 | | ------------- | ----------------------------------------------- | ----------------------------------------------------------- | ----------- | | defaultValue | 初始值 | CalendarValue | 无 | -| value | 日历选择的日期，传入后即为受控模式 | CalendarValue | 无 | +| value | 日历选择的日期，传入后即为受控模式 | CalendarValue | 无 | | selectionMode | 设置选择模式，单选或者连续区间，默认为 'range' | `single` \| `range` | 'range' | | monthRange | 月份范围，默认为最近 3 个月 | `[number, number]` | 最近 3 个月 | | weekStartsOn | 星期栏，以周几作为第一天显示。默认为 'Sunday'。 | 'Sunday' \| 'Monday' | 'Sunday' | @@ -96,3 +96,73 @@ interface LocaleText { end: string; } ``` + +## FAQ + +### 如何设置默认的开始与结束时间 ？ + +通过 `defaultValue` 设置默认的时间。 `defaultValue` 的类型为 CalendarValue。 + +CalendarValue 的类型为 `number | [number,number]`，代表单选或者连续区间的日期。 是一个时间戳，单位为毫秒。 + +举个例子，如果我们想要设置默认的开始时间为今天，结束时间为 7 天后，所以我们可以在 defaultValue 内传入 + +```ts +[dayjs().startOf('date'), dayjs().add(7, 'days').startOf('date')]; +``` + +### 通过 `onFormatter` 设置单元格的自定义数据 + +我们可以通过 `onFormatter` 设置单元格的自定义数据， `onFormatter` 的格式为 `(cell: CellState, currentValue: CalendarValue) => CellState`。 + +我们会调用每一个单元格的状态，以及当前的 value。 通过返回新的单元格数据，我们可以设置单元格的状态。 + +下面是一些常见的用例 + +#### 如何让当天之前的时间不可选？ + +支付宝小程序，我们可以通过 page 上的方法来设置，在 wxml 里需要传入一个方法名字符串。 + +axml: + +```xml + +``` + +ts: + +```ts +import dayjs from 'dayjs'; + +Page({ + handleFormat(cell: CellState) { + return { + // 如果 cell 的时间小于今天的开始时间，那么就禁止选择 + disabled: dayjs(cell.time).isBefore(dayjs().startOf('date')), + }; + }, +}); +``` + +支付宝小程序，我们可以通过 data 里的方法来设置。 在 wxml 里需要传入一个变量名。 + +wxml: + +```xml + +``` + +```ts +import dayjs from 'dayjs'; + +Page({ + data: { + handleFormat: (cell: CellState) => { + return { + // 如果 cell 的时间小于今天的开始时间，那么就禁止选择 + disabled: dayjs(cell.time).isBefore(dayjs().startOf('date')), + }; + }, + }, +}); +``` diff --git a/src/Form/FormInput/index.axml b/src/Form/FormInput/index.axml index 646b5c981..7006bcc41 100644 --- a/src/Form/FormInput/index.axml +++ b/src/Form/FormInput/index.axml @@ -21,6 +21,7 @@ type="{{type}}" password="{{password}}" placeholder="{{placeholder}}" + alwaysSystem="{{alwaysSystem}}" placeholderClassName="{{placeholderClassName}}" placeholderStyle="{{placeholderStyle}}" maxLength="{{maxLength}}" @@ -49,4 +50,4 @@ - \ No newline at end of file +