forked from opentiny/tiny-vue
docs(site/input): specification document (#1336)
This commit is contained in:
yoyo
GitHub
parent
d39cbd0926
commit
02dc3e63d7
|
|
@ -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' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -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' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@ export default {
|
|||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': { 'zh-CN': '<p>详细用法参考如下示例</p>', 'en-US': '<p>For details, see the following example.</p>' },
|
||||
'desc': { 'zh-CN': '<p>详细用法参考如下示例。</p>', 'en-US': '<p>For details, see the following example.</p>' },
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'clearable',
|
||||
'name': { 'zh-CN': '一键清空', 'en-US': 'Clearable' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>clearable</code> 属性设置输入框显示清空图标按钮</p>',
|
||||
'zh-CN': '<p>可通过 <code>clearable</code> 属性设置输入框显示清空图标按钮。</p>',
|
||||
'en-US':
|
||||
'<p>You can set the <code>clearable</code> attribute to display the clear icon button in the text box </p>'
|
||||
},
|
||||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
'name': { 'zh-CN': '密码框', 'en-US': 'Password Box' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>当 <code>type</code> 为 <code>password</code> 时，可通过 <code>show-password</code> 属性设置输入框显示密码显示/隐藏切换图标按钮</p>\n',
|
||||
'<p>当 <code>type</code> 为 <code>password</code> 时，可通过 <code>show-password</code> 属性设置输入框显示密码显示/隐藏切换图标按钮。</p>\n',
|
||||
'en-US':
|
||||
'<p>When <code>type</code> is set to <code>password</code>, you can set the <code>show-password</code> attribute to display or hide the password switch button in the text box</p>\n'
|
||||
},
|
||||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>size</code> 属性设置尺寸大小，可选值：<code>medium / small / mini</code>。注意：只在 <code>type!="textarea"</code> 时有效</p>\n',
|
||||
'<p>可通过 <code>size</code> 属性设置尺寸大小，可选值：<code>medium / small / mini</code>。注意：只在 <code>type!="textarea"</code> 时有效。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can set the size through the <code>size</code> attribute. The options are as follows: <code>medium, small, and mini</code>. Note: This parameter is valid only when <code>type!="textarea"</code> is used</p>\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': '<p>可通过 <code>prefix-icon, suffix-icon</code> 属性设置输入框头部、尾部图标</p>\n',
|
||||
'zh-CN': '<p>可通过 <code>prefix-icon, suffix-icon</code> 属性设置输入框头部、尾部图标。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can set the header icon or the end icon of the text box through the <code>prefix-icon, suffix-icon</code> attribute </p>\n'
|
||||
},
|
||||
|
|
@ -61,44 +61,19 @@ export default {
|
|||
'name': { 'zh-CN': '插槽', 'en-US': 'Slot' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>配置 <code>prepend, append, prefix, suffix</code> slot，设置输入框前置、后置、头部、尾部内容，注意：只对 <code>type=text</code> 有效</p>',
|
||||
'<p>配置 <code>prepend, append, prefix, suffix</code> slot，设置输入框前置、后置、头部、尾部内容，注意：只对 <code>type=text</code> 有效。</p>',
|
||||
'en-US':
|
||||
'<p>Configure the <code>prepend, append, prefix, suffix</code> slot. Set the front, back, header, and tail contents of the text box. Note: This parameter is valid only for <code>type=text</code></p>'
|
||||
},
|
||||
'codeFiles': ['slot.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'event',
|
||||
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p>输入框的事件，包括
|
||||
<code>input</code>(输入值时触发),
|
||||
<code>blur</code>(失去焦点时触发),
|
||||
<code>focus</code>(获取焦点时触发),
|
||||
<code>change</code>(值改变时触发),
|
||||
<code>clear</code>(清除按钮时触发)
|
||||
</p>
|
||||
`,
|
||||
'en-US': `
|
||||
<p>Event of the text box, including:
|
||||
<code>input</code> (triggered when a value is entered)
|
||||
<code>blur</code> (triggered when the focus is lost)
|
||||
<code>focus</code> (triggered when the focus is obtained)
|
||||
<code>change</code> (triggered when the value changes)
|
||||
<code>clear</code> (triggered when the button is cleared)
|
||||
</p>
|
||||
`
|
||||
},
|
||||
'codeFiles': ['event.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'rows',
|
||||
'name': { 'zh-CN': '文本域行数与宽', 'en-US': 'Lines and Width Of Textarea' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p>可通过 <code>rows</code> 属性设置文本域显示行数。注意：只在 <code>type="textarea"</code> 时有效</p>
|
||||
<p>可通过 <code>cols</code> 属性设置文本域显示宽度。注意：只在 <code>type="textarea"</code> 时有效</p>
|
||||
<p>可通过 <code>rows</code> 属性设置文本域显示行数。注意：只在 <code>type="textarea"</code> 时有效。</p>
|
||||
<p>可通过 <code>cols</code> 属性设置文本域显示宽度。注意：只在 <code>type="textarea"</code> 时有效。</p>
|
||||
`,
|
||||
'en-US': `
|
||||
<p>You can set the number of lines displayed in the text field through the <code>rows</code> property. Note: This parameter is valid only when <code>text="textarea"</code> is used. </p>
|
||||
|
|
@ -112,8 +87,8 @@ export default {
|
|||
'name': { 'zh-CN': '可缩放文本域', 'en-US': 'Scalable Text Field' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p>可通过 <code>resize</code> 属性设置文本域的缩放。可选值：<code>none / both / horizontal / vertical</code>。注意：只在 <code>type="textarea"</code> 时有效</p>
|
||||
<p>可通过 <code>autosize</code> 属性设置文本域自适应内容高度。可传入对象，如<code>{ minRows: 2, maxRows: 6 }</code>。注意：只对 <code>type="textarea"</code> 有效</p>
|
||||
<p>可通过 <code>resize</code> 属性设置文本域的缩放。可选值：<code>none / both / horizontal / vertical</code>。注意：只在 <code>type="textarea"</code> 时有效。</p>
|
||||
<p>可通过 <code>autosize</code> 属性设置文本域自适应内容高度。可传入对象，如<code>{ minRows: 2, maxRows: 6 }</code>。注意：只对 <code>type="textarea"</code> 有效。</p>
|
||||
`,
|
||||
'en-US': `
|
||||
<p>You can use the <code>resize</code> property to set the zoom of the text field. The value can be <code>none / both / horizontal / vertical</code> . Note: This parameter is valid only when <code>type="textarea"</code> is used. </p>
|
||||
|
|
@ -127,7 +102,7 @@ export default {
|
|||
'name': { 'zh-CN': '输入字数统计', 'en-US': 'Input Word Count' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>show-word-limit</code> 属性设置是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效</p>',
|
||||
'<p>可通过 <code>show-word-limit</code> 属性设置是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效。</p>',
|
||||
'en-US':
|
||||
'<p>The <code>show-word-limit</code> attribute can be used to set whether to display the input word statistics, only when type = "text" or type = "textarea" is valid</p>\n'
|
||||
},
|
||||
|
|
@ -137,7 +112,7 @@ export default {
|
|||
'demoId': 'counter',
|
||||
'name': { 'zh-CN': '计数器', 'en-US': 'Counter' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 <code>counter</code> 属性设置显示输入框字符计数器</p>\n',
|
||||
'zh-CN': '<p>可通过 <code>counter</code> 属性设置显示输入框字符计数器。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can use the <code>counter</code> attribute to set the character counter for displaying the text box. </p>\n'
|
||||
},
|
||||
|
|
@ -148,7 +123,7 @@ export default {
|
|||
'name': { 'zh-CN': '表单校验', 'en-US': 'Form validation triggered upon input' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>validate-event</code> 属性设置输入时触发表单校验。通过 <code>trigger</code> 配置触发校验规则的方式，为 <code>change</code> 时，当输入框值改变即触发校验，为 <code>blur</code> 时则失焦后触发校验</p>\n',
|
||||
'<p>可通过 <code>validate-event</code> 属性设置输入时触发表单校验。通过 <code>trigger</code> 配置触发校验规则的方式，为 <code>change</code> 时，当输入框值改变即触发校验，为 <code>blur</code> 时则失焦后触发校验。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can set the <code>validate-event</code> attribute to trigger form validation upon input. Use <code>trigger</code> to configure the mode of triggering the validation rule. If <code>change</code> is used, the validation is triggered when the value in the text box changes. If <code>blur</code> is used, the validation is triggered after the focus is lost</p>\n'
|
||||
},
|
||||
|
|
@ -158,7 +133,7 @@ export default {
|
|||
'demoId': 'method-addMemory',
|
||||
'name': { 'zh-CN': '记忆历史输入', 'en-US': 'Memory History Input' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>参考以下例子，输入完成后，输入会被记住</p>',
|
||||
'zh-CN': '<p>参考以下例子，输入完成后，输入会被记住。</p>',
|
||||
'en-US': '<p>Refer to the following example. After the input is complete, the input will be remembered</p>'
|
||||
},
|
||||
'codeFiles': ['method-addMemory.vue']
|
||||
|
|
@ -168,7 +143,7 @@ export default {
|
|||
'name': { 'zh-CN': '类型', 'en-US': 'Type' },
|
||||
'desc': {
|
||||
'zh-CN':
|
||||
'<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值</p>\n',
|
||||
'<p>通过对应的 <code>type</code> 属性，可以设置为对应的类型。默认为 text，可选值为 text，textarea 和其他 原生 input 的 type 值。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can set the corresponding type through the corresponding <code>type</code> attribute. The default value is text. The options are text, textarea, and other type values of the native input</p>\n'
|
||||
},
|
||||
|
|
@ -178,11 +153,36 @@ export default {
|
|||
'demoId': 'native',
|
||||
'name': { 'zh-CN': '原生属性', 'en-US': 'Native Attribute' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可设置 <code>name</code> <code>disabled</code> <code>readonly</code>等原生属性</p>\n',
|
||||
'zh-CN': '<p>可设置 <code>name</code> <code>disabled</code> <code>readonly</code>等原生属性。</p>\n',
|
||||
'en-US':
|
||||
'<p>You can set native attributes such as <code>name</code> <code>disabled</code> <code>readonly</code> . </p>\n'
|
||||
},
|
||||
'codeFiles': ['native.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'event',
|
||||
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
<p>输入框的事件，包括
|
||||
<code>input</code>(输入值时触发),
|
||||
<code>blur</code>(失去焦点时触发),
|
||||
<code>focus</code>(获取焦点时触发),
|
||||
<code>change</code>(值改变时触发),
|
||||
<code>clear</code>(清除按钮时触发)。
|
||||
</p>
|
||||
`,
|
||||
'en-US': `
|
||||
<p>Event of the text box, including:
|
||||
<code>input</code> (triggered when a value is entered)
|
||||
<code>blur</code> (triggered when the focus is lost)
|
||||
<code>focus</code> (triggered when the focus is obtained)
|
||||
<code>change</code> (triggered when the value changes)
|
||||
<code>clear</code> (triggered when the button is cleared)
|
||||
</p>
|
||||
`
|
||||
},
|
||||
'codeFiles': ['event.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue