diff --git a/src/_common b/src/_common index c1eeb3254..e71bd2161 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit c1eeb3254f3655db518f63b0600df031e25ee7c3 +Subproject commit e71bd2161bd3cd11d23f87f397777fb520057dd2 diff --git a/src/common.ts b/src/common.ts index e8f794152..45199f85d 100644 --- a/src/common.ts +++ b/src/common.ts @@ -69,6 +69,7 @@ export type CSSSelector = string; export interface KeysType { value?: string; label?: string; + disabled?: string; } export interface HTMLElementAttributes { diff --git a/src/form/_example/base.vue b/src/form/_example/base.vue index cd686b42c..50a14b234 100644 --- a/src/form/_example/base.vue +++ b/src/form/_example/base.vue @@ -181,12 +181,12 @@ export default { ], description: [ { - validator: (val) => val.length >= 5, + validator: (val) => !!val && val.length >= 5, message: '至少 5 个字，中文长度等于英文长度', type: 'warning', }, { - validator: (val) => val.length < 20, + validator: (val) => !val || val.length < 20, message: '不能超过 20 个字，中文长度等于英文长度', type: 'warning', }, diff --git a/src/form/form-item-props.ts b/src/form/form-item-props.ts index 761058b4f..d531cfc25 100644 --- a/src/form/form-item-props.ts +++ b/src/form/form-item-props.ts @@ -36,7 +36,8 @@ export default { }, /** 表单字段名称 */ name: { - type: [String, Number] as PropType, + type: String, + default: '', }, /** 是否显示必填符号（*），优先级高于 Form.requiredMark */ requiredMark: { @@ -54,7 +55,7 @@ export default { }, /** 校验状态，可在需要完全自主控制校验状态时使用 */ status: { - type: String, + type: String as PropType, default: '', }, /** 校验状态图标，值为 `true` 显示默认图标，默认图标有 成功、失败、警告 等，不同的状态图标不同。`statusIcon` 值为 `false`，不显示图标。`statusIcon` 值类型为渲染函数，则可以自定义右侧状态图标。优先级高级 Form 的 statusIcon */ diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx index 481f3fe19..4b99dbacb 100644 --- a/src/form/form-item.tsx +++ b/src/form/form-item.tsx @@ -48,6 +48,11 @@ export interface FormItemConstructor extends Vue { form: FormInstance; } +export function getFormItemClassName(componentName: string, name?: string) { + if (!name) return ''; + return `${componentName}-item__${name}`.replace(/(\[|\]\.)/g, '_'); +} + export default mixins(getConfigReceiverMixins('form'), getGlobalIconMixins()).extend({ name: 'TFormItem', @@ -89,7 +94,7 @@ export default mixins(getConfigReceiverMixins(' classes(): ClassName { return [ `${this.componentName}__item`, - `${this.componentName}-item__${this.name || ''}`, + getFormItemClassName(this.componentName, this.name), { [`${this.componentName}__item-with-help`]: this.help, [`${this.componentName}__item-with-extra`]: this.extraNode, @@ -98,7 +103,7 @@ export default mixins(getConfigReceiverMixins(' }, extraNode() { const list = this.errorList; - if (this.needErrorMessage && list && list[0] && list[0].message) { + if (this.needErrorMessage && list?.[0]?.message) { return
{list[0].message}
; } if (this.successList.length) { @@ -182,6 +187,14 @@ export default mixins(getConfigReceiverMixins(' errorMessages(): FormErrorMessage { return this.form.errorMessage ?? this.global.errorMessage; }, + + tipsClassNames(): ClassName { + return [ + `${this.classPrefix}-form-item-tips`, + `${this.classPrefix}-tips`, + `${this.classPrefix}-is-${this.status || 'default'}`, + ]; + }, }, created() { @@ -464,6 +477,7 @@ export default mixins(getConfigReceiverMixins(' render(): VNode { const helpNode = renderTNodeJSX(this, 'help'); + const tipsNode = renderTNodeJSX(this, 'tips'); return (
{this.getLabel()} @@ -473,6 +487,7 @@ export default mixins(getConfigReceiverMixins(' {this.getSuffixIcon()}
{helpNode &&
{helpNode}
} + {tipsNode &&
{tipsNode}
} {this.extraNode} diff --git a/src/form/form.en-US.md b/src/form/form.en-US.md index bdae87ac1..3c8d98649 100644 --- a/src/form/form.en-US.md +++ b/src/form/form.en-US.md @@ -10,19 +10,19 @@ data | Object | {} | Typescript：`FormData` | N disabled | Boolean | undefined | \- | N errorMessage | Object | - | Typescript：`FormErrorMessage` | N formControlledComponents | Array | - | Typescript：`Array` | N -labelAlign | String | right | options：left/right/top | N +labelAlign | String | right | options: left/right/top | N labelWidth | String / Number | '100px' | \- | N -layout | String | vertical | options：vertical/inline | N +layout | String | vertical | options: vertical/inline | N preventSubmitDefault | Boolean | true | \- | N requiredMark | Boolean | true | \- | N -resetType | String | empty | options：empty/initial | N -rules | Object | - | Typescript：`FormRules` `type FormRules = { [field in keyof T]?: Array }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N -scrollToFirstError | String | - | options：''/smooth/auto | N +resetType | String | empty | options: empty/initial | N +rules | Object | - | Typescript：`FormRules` `type FormRules = { [field in keyof T]?: Array }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N +scrollToFirstError | String | - | options: ''/smooth/auto | N showErrorMessage | Boolean | true | \- | N statusIcon | Boolean / Slot / Function | undefined | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N submitWithWarningMessage | Boolean | false | \- | N onReset | Function | | Typescript：`(context: { e?: FormResetEvent }) => void`
| N -onSubmit | Function | | Typescript：`(context: SubmitContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
| N +onSubmit | Function | | Typescript：`(context: SubmitContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string; fields?: any }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
| N onValidate | Function | | Typescript：`(result: ValidateResultContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
| N ### Form Events @@ -30,7 +30,7 @@ onValidate | Function | | Typescript：`(result: ValidateResultContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
+submit | `(context: SubmitContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string; fields?: any }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
validate | `(result: ValidateResultContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
### FormInstanceFunctions 组件实例方法 @@ -51,9 +51,9 @@ name | type | default | description | required for | String | - | \- | N help | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -labelAlign | String | - | options：left/right/top | N +labelAlign | String | - | options: left/right/top | N labelWidth | String / Number | - | \- | N -name | String / Number | - | Typescript：`string \| number` | N +name | String | - | \- | N requiredMark | Boolean | undefined | \- | N rules | Array | - | Typescript：`Array` | N showErrorMessage | Boolean | undefined | \- | N @@ -79,8 +79,8 @@ number | Boolean | - | \- | N pattern | Object | - | Typescript：`RegExp` | N required | Boolean | - | \- | N telnumber | Boolean | - | \- | N -trigger | String | change | options：change/blur | N -type | String | error | options：error/warning | N +trigger | String | change | options: change/blur | N +type | String | error | options: error/warning | N url | Boolean / Object | - | Typescript：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N validator | Function | - | Typescript：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N whitespace | Boolean | - | \- | N diff --git a/src/form/form.md b/src/form/form.md index 5f68a1d37..6df7b18d9 100644 --- a/src/form/form.md +++ b/src/form/form.md @@ -18,13 +18,13 @@ layout | String | vertical | 表单布局，有两种方式：纵向布局 和 preventSubmitDefault | Boolean | true | 是否阻止表单提交默认事件（表单提交默认事件会刷新页面），设置为 `true` 可以避免刷新 | N requiredMark | Boolean | true | 是否显示必填符号（*），默认显示 | N resetType | String | empty | 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值。可选项：empty/initial | N -rules | Object | - | 表单字段校验规则。TS 类型：`FormRules` `type FormRules = { [field in keyof T]?: Array }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N +rules | Object | - | 表单字段校验规则。TS 类型：`FormRules` `type FormRules = { [field in keyof T]?: Array }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts) | N scrollToFirstError | String | - | 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动。可选项：''/smooth/auto | N showErrorMessage | Boolean | true | 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性 | N statusIcon | Boolean / Slot / Function | undefined | 校验状态图标，值为 `true` 显示默认图标，默认图标有 成功、失败、警告 等，不同的状态图标不同。`statusIcon` 值为 `false`，不显示图标。`statusIcon` 值类型为渲染函数，则可以自定义右侧状态图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N submitWithWarningMessage | Boolean | false | 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件 | N onReset | Function | | TS 类型：`(context: { e?: FormResetEvent }) => void`
表单重置时触发 | N -onSubmit | Function | | TS 类型：`(context: SubmitContext) => void`
表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。
【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加 enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
| N +onSubmit | Function | | TS 类型：`(context: SubmitContext) => void`
表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。
【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加 enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string; fields?: any }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
| N onValidate | Function | | TS 类型：`(result: ValidateResultContext) => void`
校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
| N ### Form Events @@ -32,7 +32,7 @@ onValidate | Function | | TS 类型：`(result: ValidateResultContext 名称 | 参数 | 描述 -- | -- | -- reset | `(context: { e?: FormResetEvent })` | 表单重置时触发 -submit | `(context: SubmitContext)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。
【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加 enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
+submit | `(context: SubmitContext)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。
【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加 enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string; fields?: any }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
validate | `(result: ValidateResultContext)` | 校验结束后触发，result 值为 true 表示校验通过；如果校验不通过，result 值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
### FormInstanceFunctions 组件实例方法 @@ -55,7 +55,7 @@ help | String / Slot / Function | - | 表单项说明内容。TS 类型：`strin label | String / Slot / Function | '' | 字段标签名称。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N labelAlign | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N labelWidth | String / Number | - | 可以整体设置标签宽度，优先级高于 Form.labelWidth | N -name | String / Number | - | 表单字段名称。TS 类型：`string \| number` | N +name | String | - | 表单字段名称 | N requiredMark | Boolean | undefined | 是否显示必填符号（*），优先级高于 Form.requiredMark | N rules | Array | - | 表单字段校验规则。TS 类型：`Array` | N showErrorMessage | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N diff --git a/src/form/form.tsx b/src/form/form.tsx index b213846e0..0d6920bc4 100644 --- a/src/form/form.tsx +++ b/src/form/form.tsx @@ -13,7 +13,7 @@ import { import props from './props'; import { FORM_CONTROL_COMPONENTS } from './const'; import { emitEvent } from '../utils/event'; -import FormItem, { FormItemValidateResult } from './form-item'; +import FormItem, { FormItemValidateResult, getFormItemClassName } from './form-item'; import { FormResetEvent, FormSubmitEvent, ClassName } from '../common'; import { getClassPrefixMixins } from '../config-provider/config-receiver'; import mixins from '../utils/mixins'; @@ -72,7 +72,8 @@ export default mixins(classPrefixMixins).extend({ if (r === true) return; const [firstKey] = Object.keys(r); if (this.scrollToFirstError) { - this.scrollTo(`.${this.componentName}-item__${firstKey}`); + const className = getFormItemClassName(this.componentName, firstKey); + this.scrollTo(`.${className}`); } return r[firstKey][0].message; }, diff --git a/src/form/props.ts b/src/form/props.ts index 80a9caf2a..eebf0882e 100644 --- a/src/form/props.ts +++ b/src/form/props.ts @@ -77,7 +77,6 @@ export default { /** 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动 */ scrollToFirstError: { type: String as PropType, - default: '' as TdFormProps['scrollToFirstError'], validator(val: TdFormProps['scrollToFirstError']): boolean { if (!val) return true; return ['', 'smooth', 'auto'].includes(val); diff --git a/src/form/type.ts b/src/form/type.ts index 84434219c..132f5bb91 100644 --- a/src/form/type.ts +++ b/src/form/type.ts @@ -63,10 +63,9 @@ export interface TdFormProps { /** * 表单字段校验规则 */ - rules?: { [field in keyof FormData]: Array }; + rules?: FormRules; /** * 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动 - * @default '' */ scrollToFirstError?: '' | 'smooth' | 'auto'; /** @@ -102,27 +101,27 @@ export interface FormInstanceFunctions { /** * 清空校验结果。可使用 fields 指定清除部分字段的校验结果，fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例：`clearValidate(['email'])` */ - clearValidate?: (fields?: Array) => void; + clearValidate: (fields?: Array) => void; /** * 重置表单，表单里面没有重置按钮`
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
错误事件
警告事件
正常事件
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
一二三四五六日
"`; -exports[`ssr snapshot test > renders ./src/calendar/_example/value.vue correctly 1`] = `"

单个高亮日期

1998 年
11 月
隐藏周末
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
一二三四五六日

多个高亮日期

1998 年
11 月
隐藏周末
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
一二三四五六日
"`; +exports[`ssr snapshot test > renders ./src/calendar/_example/value.vue correctly 1`] = `"

单个高亮日期

1998 年
11 月
隐藏周末
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
一二三四五六日

多个高亮日期

1998 年
11 月
隐藏周末
26
27
28
29
30
31
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
一二三四五六日
"`; exports[`ssr snapshot test > renders ./src/calendar/_example/week.vue correctly 1`] = `"

使用插槽

2021 年
12 月
隐藏周末
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
星期1 星期2 星期3 星期4 星期5 星期6 星期天

使用week属性 - Array

2021 年
12 月
隐藏周末
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
星期1星期2星期3星期4星期5星期6星期天

使用week属性 - TNode

2021 年
12 月
隐藏周末
29
30
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
01
02
星期1星期2周三啦星期4星期5放假啦放假啦
"`; @@ -396,31 +396,31 @@ exports[`ssr snapshot test > renders ./src/dropdown/_example/theme.vue correctly exports[`ssr snapshot test > renders ./src/form/_example/align.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/base.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; +exports[`ssr snapshot test > renders ./src/form/_example/base.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; -exports[`ssr snapshot test > renders ./src/form/_example/clear-validate.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; +exports[`ssr snapshot test > renders ./src/form/_example/clear-validate.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; -exports[`ssr snapshot test > renders ./src/form/_example/custom-validator.vue correctly 1`] = `"
同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化
自定义异步校验方法
"`; +exports[`ssr snapshot test > renders ./src/form/_example/custom-validator.vue correctly 1`] = `"
同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化
自定义异步校验方法
"`; -exports[`ssr snapshot test > renders ./src/form/_example/disabled.vue correctly 1`] = `"
接受
  • \\"\\"
    图片加载中
请选择单张图片文件上传
"`; +exports[`ssr snapshot test > renders ./src/form/_example/disabled.vue correctly 1`] = `"
接受
  • \\"\\"
    图片加载中
请选择单张图片文件上传
"`; -exports[`ssr snapshot test > renders ./src/form/_example/error-message.vue correctly 1`] = `"
这里可以展示一段说明文字
一句话介绍自己
"`; +exports[`ssr snapshot test > renders ./src/form/_example/error-message.vue correctly 1`] = `"
这里可以展示一段说明文字
一句话介绍自己
"`; exports[`ssr snapshot test > renders ./src/form/_example/layout.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/login.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/login.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/reset.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/reset.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/size.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/size.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/validate-complicated-data.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/validate-complicated-data.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/form/_example/validate-message.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; +exports[`ssr snapshot test > renders ./src/form/_example/validate-message.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; -exports[`ssr snapshot test > renders ./src/form/_example/validator.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; +exports[`ssr snapshot test > renders ./src/form/_example/validator.vue correctly 1`] = `"
这里可以展示一段说明文字
请用一句话介绍自己
"`; -exports[`ssr snapshot test > renders ./src/form/_example/validator-status.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/form/_example/validator-status.vue correctly 1`] = `"
"`; exports[`ssr snapshot test > renders ./src/grid/_example/base.vue correctly 1`] = `"
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
"`; @@ -526,7 +526,7 @@ exports[`ssr snapshot test > renders ./src/input/_example/password.vue correctly exports[`ssr snapshot test > renders ./src/input/_example/size.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/input/_example/status.vue correctly 1`] = `"
这是普通文本提示
校验通过文本提示
校验不通过文本提示
校验存在严重问题文本提示
"`; +exports[`ssr snapshot test > renders ./src/input/_example/status.vue correctly 1`] = `"
这是普通文本提示
校验通过文本提示
校验不通过文本提示
校验存在严重问题文本提示
"`; exports[`ssr snapshot test > renders ./src/input/_example/textarea.vue correctly 1`] = `"
文本域输入框已抽离为单独组件，更多示例请参考 Textarea 组件
"`; @@ -538,7 +538,7 @@ exports[`ssr snapshot test > renders ./src/input-number/_example/align.vue corre exports[`ssr snapshot test > renders ./src/input-number/_example/auto-width.vue correctly 1`] = `"
3
"`; -exports[`ssr snapshot test > renders ./src/input-number/_example/center.vue correctly 1`] = `"
请输入
个
number can not be exceed maximum
"`; +exports[`ssr snapshot test > renders ./src/input-number/_example/center.vue correctly 1`] = `"
请输入
个
number can not be exceed maximum
"`; exports[`ssr snapshot test > renders ./src/input-number/_example/default.vue correctly 1`] = `"
"`; @@ -556,7 +556,7 @@ exports[`ssr snapshot test > renders ./src/input-number/_example/normal.vue corr exports[`ssr snapshot test > renders ./src/input-number/_example/size.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/input-number/_example/status.vue correctly 1`] = `"
这是普通文本提示

校验通过文本提示

校验不通过文本提示

校验存在严重问题文本提示

"`; +exports[`ssr snapshot test > renders ./src/input-number/_example/status.vue correctly 1`] = `"
这是普通文本提示

校验通过文本提示

校验不通过文本提示

校验存在严重问题文本提示

"`; exports[`ssr snapshot test > renders ./src/input-number/_example/step.vue correctly 1`] = `"
"`; @@ -857,7 +857,7 @@ exports[`ssr snapshot test > renders ./src/select-input/_example/multiple.vue co exports[`ssr snapshot test > renders ./src/select-input/_example/single.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/select-input/_example/status.vue correctly 1`] = `"
禁用状态：
这是禁用状态文本提示
只读状态：
这是普通状态的文本提示
成功状态：
校验通过文本提示
警告状态：
校验不通过文本提示
错误状态：
校验存在严重问题文本提示
"`; +exports[`ssr snapshot test > renders ./src/select-input/_example/status.vue correctly 1`] = `"
禁用状态：
这是禁用状态文本提示
只读状态：
这是普通状态的文本提示
成功状态：
校验通过文本提示
警告状态：
校验不通过文本提示
错误状态：
校验存在严重问题文本提示
"`; exports[`ssr snapshot test > renders ./src/select-input/_example/width.vue correctly 1`] = `"
下拉框默认宽度：
下拉框最大宽度：
与内容宽度一致：
下拉框固定宽度：
"`; @@ -1016,7 +1016,7 @@ exports[`ssr snapshot test > renders ./src/table/_example/multiple-sort.vue corr exports[`ssr snapshot test > renders ./src/table/_example/pagination.vue correctly 1`] = `"
序号
申请人
申请状态
签署方式
申请时间
6王芳审批过期纸质签署2022-02-01
7贾明审批通过电子签署2022-03-01
8张三审批失败纸质签署2022-04-01
9王芳审批过期纸质签署2022-01-01
10贾明审批通过电子签署2022-02-01
共 59 项数据
5 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 12
跳至
/ 12 页
"`; -exports[`ssr snapshot test > renders ./src/table/_example/pagination-ajax.vue correctly 1`] = `"
申请人
申请状态
联系方式
邮箱
共 0 项数据
10 条/页
  • 1
跳至
/ 1 页
"`; +exports[`ssr snapshot test > renders ./src/table/_example/pagination-ajax.vue correctly 1`] = `"
申请人
申请状态
联系方式
邮箱
共 0 项数据
10 条/页
  • 1
跳至
/ 1 页
"`; exports[`ssr snapshot test > renders ./src/table/_example/select-multiple.vue correctly 1`] = `"
申请人
申请状态
签署方式
邮箱地址
申请时间
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-01-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-02-01
王芳审批过期纸质签署
p.cumx@rampblpa.ru
2022-03-01
贾明审批通过电子签署
w.cezkdudy@lhll.au
2022-04-01
张三审批失败纸质签署
r.nmgw@peurezgn.sl
2022-01-01
"`; @@ -1091,7 +1091,7 @@ exports[`ssr snapshot test > renders ./src/tag-input/_example/max.vue correctly exports[`ssr snapshot test > renders ./src/tag-input/_example/size.vue correctly 1`] = `"
VueReact
VueReact
VueReact
"`; -exports[`ssr snapshot test > renders ./src/tag-input/_example/status.vue correctly 1`] = `"
VueReactMiniprogram
VueReactMiniprogram
这是普通文本提示
VueReactMiniprogram
校验通过文本提示
VueReactMiniprogram
校验不通过文本提示
VueReactMiniprogram
校验存在严重问题文本提示
"`; +exports[`ssr snapshot test > renders ./src/tag-input/_example/status.vue correctly 1`] = `"
VueReactMiniprogram
VueReactMiniprogram
这是普通文本提示
VueReactMiniprogram
校验通过文本提示
VueReactMiniprogram
校验不通过文本提示
VueReactMiniprogram
校验存在严重问题文本提示
"`; exports[`ssr snapshot test > renders ./src/tag-input/_example/theme.vue correctly 1`] = `"
VueReactMiniprogram
VueReactMiniprogram
VueReactMiniprogram
VueReactMiniprogram
"`; @@ -1139,7 +1139,7 @@ exports[`ssr snapshot test > renders ./src/timeline/_example/customDot.vue corre exports[`ssr snapshot test > renders ./src/timeline/_example/layout.vue correctly 1`] = `"

时间轴方向

对齐方式

label对齐方式

  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01
"`; -exports[`ssr snapshot test > renders ./src/timeline/_example/loading.vue correctly 1`] = `"
  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01
"`; +exports[`ssr snapshot test > renders ./src/timeline/_example/loading.vue correctly 1`] = `"
  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01
"`; exports[`ssr snapshot test > renders ./src/timeline/_example/reverse.vue correctly 1`] = `"
  • 事件一
    2022-01-01
  • 事件二
    2022-02-01
  • 事件三
    2022-03-01
  • 事件四
    2022-04-01
"`; @@ -1179,55 +1179,55 @@ exports[`ssr snapshot test > renders ./src/transfer/_example/target-value.vue co exports[`ssr snapshot test > renders ./src/transfer/_example/tree.vue correctly 1`] = `"
0 / 5 项
0 / 0 项
暂无数据
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/activable.vue correctly 1`] = `"
1
1.1
1.2
2
2.1
2.2
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/activable.vue correctly 1`] = `"
1
1.1
1.2
2
2.1
2.2
"`; exports[`ssr snapshot test > renders ./src/tree/_example/base.vue correctly 1`] = `"
第一段
第一段
第一段
第一段
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/checkable.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/checkable.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/controlled.vue correctly 1`] = `"
checked:
expanded:
actived:
2 这个节点不允许展开, 不允许激活
2.1 这个节点不允许选中
2.2
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/controlled.vue correctly 1`] = `"
checked:
expanded:
actived:
2 这个节点不允许展开, 不允许激活
2.1 这个节点不允许选中
2.2
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/debug-data.vue correctly 1`] = `"

数据切换

"`; +exports[`ssr snapshot test > renders ./src/tree/_example/debug-data.vue correctly 1`] = `"

数据切换

"`; -exports[`ssr snapshot test > renders ./src/tree/_example/debug-filter.vue correctly 1`] = `"
filter:
1
2
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/debug-filter.vue correctly 1`] = `"
filter:
1
2
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/debug-performance.vue correctly 1`] = `"
插入节点数量:
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/debug-performance.vue correctly 1`] = `"
插入节点数量:
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/debug-state.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/debug-state.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/debug-vscroll.vue correctly 1`] = `"

虚拟滚动 - virtual 模式

插入节点数量:
filter:
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/debug-vscroll.vue correctly 1`] = `"

虚拟滚动 - virtual 模式

插入节点数量:
filter:
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/disabled.vue correctly 1`] = `"

禁用整个 tree

禁用指定节点

"`; +exports[`ssr snapshot test > renders ./src/tree/_example/disabled.vue correctly 1`] = `"

禁用整个 tree

禁用指定节点

"`; exports[`ssr snapshot test > renders ./src/tree/_example/draggable.vue correctly 1`] = `"
1
1.1
1.1.1
1.1.1.1
1.1.1.2
1.1.2
1.1.2.1
1.1.2.2
2
2.1
2.2
"`; exports[`ssr snapshot test > renders ./src/tree/_example/empty.vue correctly 1`] = `"

默认为空状态

暂无数据

设置 empty 属性为指定字符串

😊 空数据（string）

jsx 形式

😊 空数据（ empty props ）

slot 形式

😊 空数据（slot）
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/expand-all.vue correctly 1`] = `"
1
1.1
1.1.1
1.1.2
1.2
1.2.1
1.2.2
2
2.1
2.2
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/expand-all.vue correctly 1`] = `"
1
1.1
1.1.1
1.1.2
1.2
1.2.1
1.2.2
2
2.1
2.2
"`; exports[`ssr snapshot test > renders ./src/tree/_example/expand-level.vue correctly 1`] = `"
1
1.1
1.2
2
2.1
2.2
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/expand-mutex.vue correctly 1`] = `"
1
2
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/expand-mutex.vue correctly 1`] = `"
1
2
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/filter.vue correctly 1`] = `"

默认状态

过滤动作由 filter 属性的变更触发，所以不能只修改传递给 filter 属性内部的数据，应当在条件变化时变更 filter 属性。

清空过滤条件时，应设置 filter 属性为 null，来触发 tree 组件展示状态还原。

allowFoldNodeOnFilter 属性默认为 false，此时过滤状态下展开的路径节点无法被收起。

filter:
1
2

allowFoldNodeOnFilter="true"

allowFoldNodeOnFilter 属性设置为 true 时，过滤状态下展开的节点，允许点击收起，注意这会影响到 tree 组件当前的展开状态数据。

每次变更过滤条件时，会重设节点展开状态，将命中节点的路径节点展开。

当清空过滤条件时，将会还原为设置过滤条件之前时的展开状态。

filter:
1
2
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/filter.vue correctly 1`] = `"

默认状态

过滤动作由 filter 属性的变更触发，所以不能只修改传递给 filter 属性内部的数据，应当在条件变化时变更 filter 属性。

清空过滤条件时，应设置 filter 属性为 null，来触发 tree 组件展示状态还原。

allowFoldNodeOnFilter 属性默认为 false，此时过滤状态下展开的路径节点无法被收起。

filter:
1
2

allowFoldNodeOnFilter="true"

allowFoldNodeOnFilter 属性设置为 true 时，过滤状态下展开的节点，允许点击收起，注意这会影响到 tree 组件当前的展开状态数据。

每次变更过滤条件时，会重设节点展开状态，将命中节点的路径节点展开。

当清空过滤条件时，将会还原为设置过滤条件之前时的展开状态。

filter:
1
2
"`; exports[`ssr snapshot test > renders ./src/tree/_example/icon.vue correctly 1`] = `"

属性设置 jsx 形式

1
2

slot 形式

1
2
"`; exports[`ssr snapshot test > renders ./src/tree/_example/label.vue correctly 1`] = `"

属性设置 jsx 形式

value: t11479, label: 1
value: t11480, label: 1.1
value: t11481, label: 1.2
value: t11482, label: 2
value: t11483, label: 2.1
value: t11484, label: 2.2

slot 形式

"`; -exports[`ssr snapshot test > renders ./src/tree/_example/lazy.vue correctly 1`] = `"

数据延迟加载

默认为点击加载数据。

valueMode 默认为 'onlyLeaf'。选中父节点时，子节点由于未加载，无法更新和获取选中状态，导致无法更新父节点的状态。

所以使用延迟加载时，推荐 valueMode 设置为 'all' 或者 'parentFirst'。

"`; +exports[`ssr snapshot test > renders ./src/tree/_example/lazy.vue correctly 1`] = `"

数据延迟加载

默认为点击加载数据。

valueMode 默认为 'onlyLeaf'。选中父节点时，子节点由于未加载，无法更新和获取选中状态，导致无法更新父节点的状态。

所以使用延迟加载时，推荐 valueMode 设置为 'all' 或者 'parentFirst'。

"`; -exports[`ssr snapshot test > renders ./src/tree/_example/line.vue correctly 1`] = `"

默认样式

1
1.1
1.2
2
2.1
2.1.1
2.1.1.1
2.1.1.1.1
2.1.1.1.2
2.1.2
2.2
3
3.1
3.2
4

使用属性结合 jsx 来自定义呈现

1
1.1
1.2
2
2.1
2.1.1
2.1.1.1
2.1.1.1.1
2.1.1.1.2
2.1.2
2.2
3
3.1
3.2
4

slot 形式

1
1.1
1.2
2
2.1
2.1.1
2.1.1.1
2.1.1.1.1
2.1.1.1.2
2.1.2
2.2
3
3.1
3.2
4
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/line.vue correctly 1`] = `"

默认样式

1
1.1
1.2
2
2.1
2.1.1
2.1.1.1
2.1.1.1.1
2.1.1.1.2
2.1.2
2.2
3
3.1
3.2
4

使用属性结合 jsx 来自定义呈现

1
1.1
1.2
2
2.1
2.1.1
2.1.1.1
2.1.1.1.1
2.1.1.1.2
2.1.2
2.2
3
3.1
3.2
4

slot 形式

1
1.1
1.2
2
2.1
2.1.1
2.1.1.1
2.1.1.1.1
2.1.1.1.2
2.1.2
2.2
3
3.1
3.2
4
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/load.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/load.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/operations.vue correctly 1`] = `"

属性结合 jsx 形式传递

1 | value: node1value: node1
2 | value: node2value: node2

slot 形式

filter:

操作树节点

* 相关信息通过控制台输出

"`; +exports[`ssr snapshot test > renders ./src/tree/_example/operations.vue correctly 1`] = `"

属性结合 jsx 形式传递

1 | value: node1value: node1
2 | value: node2value: node2

slot 形式

filter:

操作树节点

* 相关信息通过控制台输出

"`; -exports[`ssr snapshot test > renders ./src/tree/_example/sync.vue correctly 1`] = `"
checked:
expanded:
actived:
2
2.1
2.2
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/sync.vue correctly 1`] = `"
checked:
expanded:
actived:
2
2.1
2.2
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/transition.vue correctly 1`] = `"
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/transition.vue correctly 1`] = `"
"`; -exports[`ssr snapshot test > renders ./src/tree/_example/vscroll.vue correctly 1`] = `"

虚拟滚动 - lazy模式

虚拟滚动 - virtual 模式

插入节点数量:
"`; +exports[`ssr snapshot test > renders ./src/tree/_example/vscroll.vue correctly 1`] = `"

虚拟滚动 - lazy模式

虚拟滚动 - virtual 模式

插入节点数量:
"`; exports[`ssr snapshot test > renders ./src/tree-select/_example/base.vue correctly 1`] = `"
单选：
"`;