From 02dc3e63d74c5d9f48104695dc7606a3b377c3ac Mon Sep 17 00:00:00 2001 From: yoyo <15014217605@163.com> Date: Thu, 25 Jan 2024 17:00:18 +0800 Subject: [PATCH] docs(site/input): specification document (#1336) --- .../pc/app/input/event-composition-api.vue | 10 +-- examples/sites/demos/pc/app/input/event.vue | 10 +-- .../sites/demos/pc/app/input/webdoc/input.js | 84 +++++++++---------- 3 files changed, 52 insertions(+), 52 deletions(-) diff --git a/examples/sites/demos/pc/app/input/event-composition-api.vue b/examples/sites/demos/pc/app/input/event-composition-api.vue index a354b6b83..79c6dda49 100644 --- a/examples/sites/demos/pc/app/input/event-composition-api.vue +++ b/examples/sites/demos/pc/app/input/event-composition-api.vue @@ -15,23 +15,23 @@ const focusBlur = ref('') const clearValue = ref('clear') function onChange() { - Modal.message('change') + Modal.message({ message: 'change 事件触发了', status: 'info' }) } function onInput() { - Modal.message('input') + Modal.message({ message: 'input 事件触发了', status: 'info' }) } function onBlur() { - Modal.message('blur') + Modal.message({ message: 'blur 事件触发了', status: 'info' }) } function onFocus() { - Modal.message('focus') + Modal.message({ message: 'focus 事件触发了', status: 'info' }) } function onClear() { - Modal.message('clear') + Modal.message({ message: 'clear 事件触发了', status: 'info' }) } diff --git a/examples/sites/demos/pc/app/input/event.vue b/examples/sites/demos/pc/app/input/event.vue index ccce0441f..07985a47a 100644 --- a/examples/sites/demos/pc/app/input/event.vue +++ b/examples/sites/demos/pc/app/input/event.vue @@ -22,19 +22,19 @@ export default { }, methods: { onChange() { - Modal.message('change') + Modal.message({ message: 'change 事件触发了', status: 'info' }) }, onInput() { - Modal.message('input') + Modal.message({ message: 'input 事件触发了', status: 'info' }) }, onBlur() { - Modal.message('blur') + Modal.message({ message: 'blur 事件触发了', status: 'info' }) }, onFocus() { - Modal.message('focus') + Modal.message({ message: 'focus 事件触发了', status: 'info' }) }, onClear() { - Modal.message('clear') + Modal.message({ message: 'clear 事件触发了', status: 'info' }) } } } diff --git a/examples/sites/demos/pc/app/input/webdoc/input.js b/examples/sites/demos/pc/app/input/webdoc/input.js index f8133ea65..ea368db31 100644 --- a/examples/sites/demos/pc/app/input/webdoc/input.js +++ b/examples/sites/demos/pc/app/input/webdoc/input.js @@ -5,14 +5,14 @@ export default { { 'demoId': 'basic-usage', 'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' }, - 'desc': { 'zh-CN': '

详细用法参考如下示例

', 'en-US': '

For details, see the following example.

' }, + 'desc': { 'zh-CN': '

详细用法参考如下示例。

', 'en-US': '

For details, see the following example.

' }, 'codeFiles': ['basic-usage.vue'] }, { 'demoId': 'clearable', 'name': { 'zh-CN': '一键清空', 'en-US': 'Clearable' }, 'desc': { - 'zh-CN': '

可通过 clearable 属性设置输入框显示清空图标按钮

', + 'zh-CN': '

可通过 clearable 属性设置输入框显示清空图标按钮。

', 'en-US': '

You can set the clearable attribute to display the clear icon button in the text box

' }, @@ -23,7 +23,7 @@ export default { 'name': { 'zh-CN': '密码框', 'en-US': 'Password Box' }, 'desc': { 'zh-CN': - '

当 type 为 password 时，可通过 show-password 属性设置输入框显示密码显示/隐藏切换图标按钮

\n', + '

当 type 为 password 时，可通过 show-password 属性设置输入框显示密码显示/隐藏切换图标按钮。

\n', 'en-US': '

When type is set to password, you can set the show-password attribute to display or hide the password switch button in the text box

\n' }, @@ -34,7 +34,7 @@ export default { 'name': { 'zh-CN': '尺寸', 'en-US': 'Size' }, 'desc': { 'zh-CN': - '

可通过 size 属性设置尺寸大小，可选值：medium / small / mini。注意：只在 type!="textarea" 时有效

\n', + '

可通过 size 属性设置尺寸大小，可选值：medium / small / mini。注意：只在 type!="textarea" 时有效。

\n', 'en-US': '

You can set the size through the size attribute. The options are as follows: medium, small, and mini. Note: This parameter is valid only when type!="textarea" is used

\n' }, @@ -43,14 +43,14 @@ export default { { 'demoId': 'methods', 'name': { 'zh-CN': '实例方法', 'en-US': 'Instance Method' }, - 'desc': { 'zh-CN': '可使用组件的实例方法', 'en-US': 'Instance methods for components that can be used' }, + 'desc': { 'zh-CN': '可使用组件的实例方法。', 'en-US': 'Instance methods for components that can be used' }, 'codeFiles': ['methods.vue'] }, { 'demoId': 'input-icon', 'name': { 'zh-CN': '图标', 'en-US': 'Icon' }, 'desc': { - 'zh-CN': '

可通过 prefix-icon, suffix-icon 属性设置输入框头部、尾部图标

\n', + 'zh-CN': '

可通过 prefix-icon, suffix-icon 属性设置输入框头部、尾部图标。

\n', 'en-US': '

You can set the header icon or the end icon of the text box through the prefix-icon, suffix-icon attribute

\n' }, @@ -61,44 +61,19 @@ export default { 'name': { 'zh-CN': '插槽', 'en-US': 'Slot' }, 'desc': { 'zh-CN': - '

配置 prepend, append, prefix, suffix slot，设置输入框前置、后置、头部、尾部内容，注意：只对 type=text 有效

', + '

配置 prepend, append, prefix, suffix slot，设置输入框前置、后置、头部、尾部内容，注意：只对 type=text 有效。

', 'en-US': '

Configure the prepend, append, prefix, suffix slot. Set the front, back, header, and tail contents of the text box. Note: This parameter is valid only for type=text

' }, 'codeFiles': ['slot.vue'] }, - { - 'demoId': 'event', - 'name': { 'zh-CN': '事件', 'en-US': 'Event' }, - 'desc': { - 'zh-CN': ` -

输入框的事件，包括 - input(输入值时触发), - blur(失去焦点时触发), - focus(获取焦点时触发), - change(值改变时触发), - clear(清除按钮时触发) -

- `, - 'en-US': ` -

Event of the text box, including: - input (triggered when a value is entered) - blur (triggered when the focus is lost) - focus (triggered when the focus is obtained) - change (triggered when the value changes) - clear (triggered when the button is cleared) -

- ` - }, - 'codeFiles': ['event.vue'] - }, { 'demoId': 'rows', 'name': { 'zh-CN': '文本域行数与宽', 'en-US': 'Lines and Width Of Textarea' }, 'desc': { 'zh-CN': ` -

可通过 rows 属性设置文本域显示行数。注意：只在 type="textarea" 时有效

-

可通过 cols 属性设置文本域显示宽度。注意：只在 type="textarea" 时有效

+

可通过 rows 属性设置文本域显示行数。注意：只在 type="textarea" 时有效。

+

可通过 cols 属性设置文本域显示宽度。注意：只在 type="textarea" 时有效。

`, 'en-US': `

You can set the number of lines displayed in the text field through the rows property. Note: This parameter is valid only when text="textarea" is used.

@@ -112,8 +87,8 @@ export default { 'name': { 'zh-CN': '可缩放文本域', 'en-US': 'Scalable Text Field' }, 'desc': { 'zh-CN': ` -

可通过 resize 属性设置文本域的缩放。可选值：none / both / horizontal / vertical。注意：只在 type="textarea" 时有效

-

可通过 autosize 属性设置文本域自适应内容高度。可传入对象，如{ minRows: 2, maxRows: 6 }。注意：只对 type="textarea" 有效

+

可通过 resize 属性设置文本域的缩放。可选值：none / both / horizontal / vertical。注意：只在 type="textarea" 时有效。

+

可通过 autosize 属性设置文本域自适应内容高度。可传入对象，如{ minRows: 2, maxRows: 6 }。注意：只对 type="textarea" 有效。

`, 'en-US': `

You can use the resize property to set the zoom of the text field. The value can be none / both / horizontal / vertical . Note: This parameter is valid only when type="textarea" is used.

@@ -127,7 +102,7 @@ export default { 'name': { 'zh-CN': '输入字数统计', 'en-US': 'Input Word Count' }, 'desc': { 'zh-CN': - '

可通过 show-word-limit 属性设置是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效

', + '

可通过 show-word-limit 属性设置是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效。

', 'en-US': '

The show-word-limit attribute can be used to set whether to display the input word statistics, only when type = "text" or type = "textarea" is valid

\n' }, @@ -137,7 +112,7 @@ export default { 'demoId': 'counter', 'name': { 'zh-CN': '计数器', 'en-US': 'Counter' }, 'desc': { - 'zh-CN': '

可通过 counter 属性设置显示输入框字符计数器

\n', + 'zh-CN': '

可通过 counter 属性设置显示输入框字符计数器。

\n', 'en-US': '

You can use the counter attribute to set the character counter for displaying the text box.

\n' }, @@ -148,7 +123,7 @@ export default { 'name': { 'zh-CN': '表单校验', 'en-US': 'Form validation triggered upon input' }, 'desc': { 'zh-CN': - '

可通过 validate-event 属性设置输入时触发表单校验。通过 trigger 配置触发校验规则的方式，为 change 时，当输入框值改变即触发校验，为 blur 时则失焦后触发校验

\n', + '

可通过 validate-event 属性设置输入时触发表单校验。通过 trigger 配置触发校验规则的方式，为 change 时，当输入框值改变即触发校验，为 blur 时则失焦后触发校验。

\n', 'en-US': '

You can set the validate-event attribute to trigger form validation upon input. Use trigger to configure the mode of triggering the validation rule. If change is used, the validation is triggered when the value in the text box changes. If blur is used, the validation is triggered after the focus is lost

\n' }, @@ -158,7 +133,7 @@ export default { 'demoId': 'method-addMemory', 'name': { 'zh-CN': '记忆历史输入', 'en-US': 'Memory History Input' }, 'desc': { - 'zh-CN': '

参考以下例子，输入完成后，输入会被记住

', + 'zh-CN': '

参考以下例子，输入完成后，输入会被记住。

', 'en-US': '

Refer to the following example. After the input is complete, the input will be remembered

' }, 'codeFiles': ['method-addMemory.vue'] @@ -168,7 +143,7 @@ export default { 'name': { 'zh-CN': '类型', 'en-US': 'Type' }, 'desc': { 'zh-CN': - '

通过对应的 type 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值

\n', + '

通过对应的 type 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值。

\n', 'en-US': '

You can set the corresponding type through the corresponding type attribute. The default value is text. The options are text, textarea, and other type values of the native input

\n' }, @@ -178,11 +153,36 @@ export default { 'demoId': 'native', 'name': { 'zh-CN': '原生属性', 'en-US': 'Native Attribute' }, 'desc': { - 'zh-CN': '

可设置 name disabled readonly等原生属性

\n', + 'zh-CN': '

可设置 name disabled readonly等原生属性。

\n', 'en-US': '

You can set native attributes such as name disabled readonly .

\n' }, 'codeFiles': ['native.vue'] + }, + { + 'demoId': 'event', + 'name': { 'zh-CN': '事件', 'en-US': 'Event' }, + 'desc': { + 'zh-CN': ` +

输入框的事件，包括 + input(输入值时触发), + blur(失去焦点时触发), + focus(获取焦点时触发), + change(值改变时触发), + clear(清除按钮时触发)。 +

+ `, + 'en-US': ` +

Event of the text box, including: + input (triggered when a value is entered) + blur (triggered when the focus is lost) + focus (triggered when the focus is obtained) + change (triggered when the value changes) + clear (triggered when the button is cleared) +

+ ` + }, + 'codeFiles': ['event.vue'] } ], apis: [