From a530c0314c193b0a8e552e851a026b1ad06bd6ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=A8=E6=A7=BF=E8=8A=B1=E5=BC=80?= <15800678225@163.com> Date: Tue, 14 Jan 2020 10:15:35 +0800 Subject: [PATCH] feat: add multiple examples (#5564) --- src/field/README.md | 13 +++++ src/field/README.zh-CN.md | 13 +++++ src/field/demo/index.vue | 19 +++++++- .../test/__snapshots__/demo.spec.js.snap | 10 ++++ src/number-keyboard/README.md | 39 +++++++++++++++ src/number-keyboard/README.zh-CN.md | 39 +++++++++++++++ src/number-keyboard/demo/index.vue | 39 ++++++++++++++- .../test/__snapshots__/demo.spec.js.snap | 12 +++++ src/password-input/README.md | 47 ++++++++++++++++++ src/password-input/README.zh-CN.md | 48 +++++++++++++++++++ src/password-input/demo/index.vue | 26 ++++++++-- .../test/__snapshots__/demo.spec.js.snap | 12 +++++ 12 files changed, 310 insertions(+), 7 deletions(-) diff --git a/src/field/README.md b/src/field/README.md index 8b9f109fd..1f2084be3 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -195,6 +195,19 @@ Textarea Field can be auto resize when has `autosize` prop /> ``` +### Input Align + +Use `input-align` prop to align the input value + +```html + +``` + ## API ### Props diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index 99e83f4b6..8c778a98d 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -214,6 +214,19 @@ export default { /> ``` +### 输入框内容对齐 + +通过`input-align`属性可以设置输入框内容的对齐方式 + +```html + +``` + ## API ### Props diff --git a/src/field/demo/index.vue b/src/field/demo/index.vue index df9c43610..48b90e710 100644 --- a/src/field/demo/index.vue +++ b/src/field/demo/index.vue @@ -145,6 +145,17 @@ /> + + + + + + @@ -171,13 +182,15 @@ export default { showWordLimit: '显示字数统计', inputReadonly: '输入框只读', inputDisabled: '输入框已禁用', + inputAlign: '输入框内容对齐', smsPlaceholder: '请输入短信验证码', textPlaceholder: '请输入文本', digitPlaceholder: '请输入整数', phonePlaceholder: '请输入手机号', textareaAutosize: '高度自适应', numberPlaceholder: '请输入数字（支持小数）', - messagePlaceholder: '请输入留言' + messagePlaceholder: '请输入留言', + alignPlaceHolder: '输入框内容右对齐', }, 'en-US': { tel: 'Tel', @@ -199,13 +212,15 @@ export default { showWordLimit: 'Show Word Limit', inputReadonly: 'Input Readonly', inputDisabled: 'Input Disabled', + inputAlign: 'Input Align', smsPlaceholder: 'SMS', textPlaceholder: 'Text', digitPlaceholder: 'Digit', phonePlaceholder: 'Phone', textareaAutosize: 'Auto Resize', numberPlaceholder: 'Number', - messagePlaceholder: 'Message' + messagePlaceholder: 'Message', + alignPlaceHolder: 'Input Align Right', } }, diff --git a/src/field/test/__snapshots__/demo.spec.js.snap b/src/field/test/__snapshots__/demo.spec.js.snap index 92f5d3c1b..204a15802 100644 --- a/src/field/test/__snapshots__/demo.spec.js.snap +++ b/src/field/test/__snapshots__/demo.spec.js.snap @@ -146,5 +146,15 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
文本
+
+
+
+
+
+
`; diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index 1a64da1fa..c53ed2662 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -90,6 +90,45 @@ export default { } ``` +### Bottom Left Button Content + +Use `extra-key` prop to set the content of bottom left button + +```html + + Show Id Card Number Keyboard + + + +``` + +### Keyboard Title + +Use `title` prop to set keyboard title + +```html + + Show Custom Title Keyboard + + + +``` + ## API ### Props diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 6ed827e87..0edc0f4df 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -96,6 +96,45 @@ export default { } ``` +### 左下角按键内容 + +通过`extra-key`属性可以设置左下角按键内容 + +```html + + 弹出身份证号码键盘 + + + +``` + +### 键盘标题 + +通过`title`属性可以设置键盘标题 + +```html + + 弹出自定义标题键盘 + + + +``` + ## API ### Props diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue index 18329299d..85a8cf8f4 100644 --- a/src/number-keyboard/demo/index.vue +++ b/src/number-keyboard/demo/index.vue @@ -43,6 +43,33 @@ @blur="keyboard = ''" /> + + + {{ $t('button3') }} + + + + + + {{ $t('button4') }} + + + @@ -54,20 +81,28 @@ export default { custom: '自定义样式', button1: '弹出默认键盘', button2: '弹出自定义键盘', + button3: '弹出身份证号码键盘', + button4: '弹出自定义标题键盘', close: '完成', input: '输入', bindValue: '双向绑定', - clickToInput: '点此输入' + clickToInput: '点此输入', + extraKey: '左下角按键内容', + title: '键盘标题' }, 'en-US': { default: 'Default style', custom: 'Custom style', button1: 'Show Default Keyboard', button2: 'Show Custom Keyboard', + button3: 'Show Id Card Number Keyboard', + button4: 'Show Custom Title Keyboard', close: 'Close', input: 'Input', bindValue: 'Bind Value', - clickToInput: 'Click To Input' + clickToInput: 'Click To Input', + extraKey: 'Bottom Left Button Content', + title: 'Keyboard Title' } }, diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap index 9f688b807..6b52c552b 100644 --- a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap +++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap @@ -25,5 +25,17 @@ exports[`renders demo correctly 1`] = `
1234567890删除
+
+ +
+
+ +
`; diff --git a/src/password-input/README.md b/src/password-input/README.md index dd2b0b931..cb56735d7 100644 --- a/src/password-input/README.md +++ b/src/password-input/README.md @@ -78,6 +78,53 @@ export default { /> ``` +### Hint Error + +Use `error-info` prop to set error message. For example, a password error is prompted when entering 6 bits + +```html + + + + + +``` + +```javascript +export default { + data() { + return { + value: '123', + showKeyboard: true, + errorInfo: '' + }; + }, + + methods: { + onInput(key) { + this.value = (this.value + key).slice(0, 6); + if (this.value.length === 6) { + this.errorInfo = 'Password Mistake'; + } else { + this.errorInfo = ''; + } + }, + onDelete() { + this.value = this.value.slice(0, this.value.length - 1); + } + } +} +``` ## API ### Props diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md index b2d815dff..bc721f8c5 100644 --- a/src/password-input/README.zh-CN.md +++ b/src/password-input/README.zh-CN.md @@ -78,6 +78,54 @@ export default { /> ``` +### 错误提示 + +通过`error-info`属性可以设置错误提示信息，例如当输入六位时提示密码错误 + +```html + + + + + +``` + +```javascript +export default { + data() { + return { + value: '123', + showKeyboard: true, + errorInfo: '' + }; + }, + + methods: { + onInput(key) { + this.value = (this.value + key).slice(0, 6); + if (this.value.length === 6) { + this.errorInfo = '密码错误'; + } else { + this.errorInfo = ''; + } + }, + onDelete() { + this.value = this.value.slice(0, this.value.length - 1); + } + } +} +``` + ## API ### Props diff --git a/src/password-input/demo/index.vue b/src/password-input/demo/index.vue index 41f3c25b2..488149015 100644 --- a/src/password-input/demo/index.vue +++ b/src/password-input/demo/index.vue @@ -34,6 +34,15 @@ @focus="keyboard = 'value3'" /> + + + + @@ -43,12 +52,16 @@ export default { 'zh-CN': { info: '密码为 6 位数字', customLength: '自定义长度', - removeMask: '明文展示' + removeMask: '明文展示', + hintError: '错误提示', + errorInfo: '密码错误' }, 'en-US': { info: 'Some tips', customLength: 'Custom Length', - removeMask: 'Remove Mask' + removeMask: 'Remove Mask', + hintError: 'Hint Error', + errorInfo: 'Password Mistake' } }, @@ -57,7 +70,9 @@ export default { value1: '123', value2: '123', value3: '123', - keyboard: 'value1' + value4: '123', + keyboard: 'value1', + errorInfo: '' }; }, @@ -65,6 +80,11 @@ export default { onInput(key) { const { keyboard } = this; this[keyboard] = (this[keyboard] + key).slice(0, 6); + if (this[keyboard].length === 6) { + this.errorInfo = this.$t('errorInfo'); + } else { + this.errorInfo = ''; + } }, onDelete() { diff --git a/src/password-input/test/__snapshots__/demo.spec.js.snap b/src/password-input/test/__snapshots__/demo.spec.js.snap index 46cc5c6da..ce7e83eda 100644 --- a/src/password-input/test/__snapshots__/demo.spec.js.snap +++ b/src/password-input/test/__snapshots__/demo.spec.js.snap @@ -42,5 +42,17 @@ exports[`renders demo correctly 1`] = ` +
+
+
    +
    • +
    • +
    • +
    • +
    • +
    • +
+
+
`;