taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: add link for individual props/events/slots/configs/icons

Browse Source
This commit is contained in:
Justineo
2021-10-20 01:11:27 +08:00
parent df2b6892d2
commit b0dcdbb873
162 changed files with 2176 additions and 2073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
one/docs/components/form.md
View File

@@ -8,7 +8,7 @@
### 基础样式
使用 `actions` 插槽来提供表单操作按钮。
使用 [`actions`](#slots-actions) 插槽来提供表单操作按钮。
[[ demo src="/demo/form/normal.vue" ]]
@@ -34,12 +34,12 @@
| 名称 | 类型 | 默认值 | 描述 |
| -- | -- | -- | -- |
| `readonly` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
| `disabled` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
| `data` | `Object` | - | [^data] |
| `validators` | `Array<Object>=` | - | [^validators] |
| `before-validate` | `function=` | - | 表单进入提交流程后，进行校验之前的 hook，传入参数为 `(data)`，`data` 为表单 `data` 属性值的副本。支持返回 `Promise`，返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续，其它返回值表示中断流程并触发 [`invalid`](#事件) 事件。|
| `after-validate` | `function=` | - | 表单校验成功后，触发 `submit` 事件之前的 hook，传入参数为 `(data)`，与 `beforeValidate` 的入参是同一个引用。支持返回 `Promise`，返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续，其它返回值表示中断流程并触发 [`invalid`](#事件) 事件。|
| ``readonly`` | `boolean=` | `false` | 内部输入组件是否为只读状态。 |
| ``disabled`` | `boolean=` | `false` | 内部输入组件是否为禁用状态。 |
| ``data`` | `Object` | - | [^data] |
| ``validators`` | `Array<Object>=` | - | [^validators] |
| ``before-validate`` | `function=` | - | 表单进入提交流程后，进行校验之前的 hook，传入参数为 `(data)`，`data` 为表单 [`data`](#props-data) 属性值的副本。支持返回 `Promise`，返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续，其它返回值表示中断流程并触发 [`invalid`](#events-invalid) 事件。|
| ``after-validate`` | `function=` | - | 表单校验成功后，触发 [`submit`](#events-submit) 事件之前的 hook，传入参数为 `(data)`，与 `beforeValidate` 的入参是同一个引用。支持返回 `Promise`，返回值或 `Promise.resolve` 的值为 `true` 或 `undefined` 表示流程继续，其它返回值表示中断流程并触发 [`invalid`](#events-invalid) 事件。|
^^^data
表单绑定的数据，和表单中的输入组件通过 `v-model` 绑定，也是表单校验时的数据源。
@@ -56,7 +56,7 @@
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `fields` | `Array` | 对应 `Field` 的 `field` 描述的集合。事件会绑定到对应 `Field` 中的输入组件上。 |
| `validate` | `function` | 自定义校验函数，传入参数为 `(data[fields[0]], data[fields[1]], ...)`，`data` 为表单 `data` 属性值的引用。返回 `undefined`/`true` 代表校验成功，返回 `{[field]: message, ...}` 表示校验失败信息，详见[表单 › 表单校验逻辑](#表单校验逻辑)。 |
| `validate` | `function` | 自定义校验函数，传入参数为 `(data[fields[0]], data[fields[1]], ...)`，`data` 为表单 [`data`](#props-data) 属性值的引用。返回 `undefined` / `true` 代表校验成功，返回 `{[field]: message, ...}` 表示校验失败信息，详见[表单 › 表单校验逻辑](#表单校验逻辑)。 |
| `triggers` | `string | Array<string>` | 事件名称集合。 |
+++
@@ -75,15 +75,15 @@
| 名称 | 描述 |
| -- | -- |
| `default` | 可直接内联 `Fieldset` 或 `Field` 组件。无默认内容。 |
| `actions` | 表单操作内容，如“提交”、“取消”按钮等。无默认内容。 |
| ``default`` | 可直接内联 `Fieldset` 或 `Field` 组件。无默认内容。 |
| ``actions`` | 表单操作内容，如“提交”、“取消”按钮等。无默认内容。 |
### 事件
| 名称 | 描述 |
| -- | -- |
| `submit` | [^event-submit] |
| `invalid` | [^event-invalid] |
| ``submit`` | [^event-submit] |
| ``invalid`` | [^event-invalid] |
^^^event-submit
在原生 `submit` 事件之后触发，回调参数为 `(data, event)`。具体提交流程请参考[表单 › 表单提交流程](#表单提交流程)。
@@ -91,7 +91,7 @@
+++参数详情
| 名称 | 类型 | 描述 |
| -- | -- | -- |
| `data` | `Object` | 表单 `data` 属性值的引用。 |
| `data` | `Object` | 表单 [`data`](#props-data) 属性值的引用。 |
| `event` | `Event` | 原生事件对象。 |
+++
^^^
@@ -105,7 +105,7 @@
<img class="preview hero" src="/images/development/form/flow.png">
:::warning
`beforeValidate` 和 `afterValidate` 以及 `sumbit` 事件操作的 `data` 均为 props `data` 的同一个副本。考虑到校验信息和 UI 中数据的一致性，`validate` 的目标数据是 props `data` 的源数据。因此在 `beforeValidate` 中**不建议**修改 `data` 副本。
`beforeValidate` 和 `afterValidate` 以及 [`submit`](#events-submit) 事件操作的 `data` 均为 props `data` 的同一个副本。考虑到校验信息和 UI 中数据的一致性，`validate` 的目标数据是 props `data` 的源数据。因此在 `beforeValidate` 中**不建议**修改 `data` 副本。
:::
### 表单校验逻辑
@@ -157,7 +157,7 @@ validators: [
#### `Field` 的 `rule` 和 `validators` 的优先级
校验失败的信息会添加到对应的 `Field` 的 `validities` 信息中。由于同个操作触发的校验，`validators` 的校验结果优先级大于 `Field` 的 `rule`，不同操作触发的校验，展现最后一个结果。`Field` 的 `rule` 内部的优先级，参考[表单项 › 属性](./field#属性)。
校验失败的信息会添加到对应的 `Field` 的 `validities` 信息中。由于同个操作触发的校验，`validators` 的校验结果优先级大于 `Field` 的 `rule`，不同操作触发的校验，展现最后一个结果。`Field` 的 `rule` 内部的优先级，请参考其 [`rules`](./field#props-rules) 属性。
#### 交互过程的校验
@@ -167,4 +167,4 @@ validators: [
<img class="preview hero" src="/images/development/form/submit.png">
提交时，其中一个过程的校验失败不会导致整个校验终止，校验信息将在两个过程执行完毕后进行整合，并传递到 [`invalid`](#事件) 事件中去。
提交时，其中一个过程的校验失败不会导致整个校验终止，校验信息将在两个过程执行完毕后进行整合，并传递到 [`invalid`](#events-invalid) 事件中去。