diff --git a/src/number-keyboard/DeleteIcon.tsx b/src/number-keyboard/DeleteIcon.tsx new file mode 100644 index 000000000..16427f490 --- /dev/null +++ b/src/number-keyboard/DeleteIcon.tsx @@ -0,0 +1,12 @@ +export default { + render() { + return ( + + + + ); + }, +}; diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js index 3dc156994..42872ecd4 100644 --- a/src/number-keyboard/Key.js +++ b/src/number-keyboard/Key.js @@ -1,5 +1,6 @@ import { createNamespace } from '../utils'; import { TouchMixin } from '../mixins/touch'; +import DeleteIcon from './DeleteIcon'; const [createComponent, bem] = createNamespace('key'); @@ -47,6 +48,17 @@ export default createComponent({ this.$emit('press', this.text, this.type); } }, + + genContent() { + const isDelete = this.type === 'delete'; + const text = this.slots('default') || this.text; + + if (isDelete) { + return text || ; + } + + return text; + }, }, render() { @@ -64,7 +76,7 @@ export default createComponent({ }, ])} > - {this.slots('default') || this.text} + {this.genContent()} ); diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index 58b3c56b9..a0fd795c6 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -11,16 +11,14 @@ Vue.use(NumberKeyboard); ## Usage -### Default Style +### Default Keyboard ```html - + Show Keyboard - + ``` +### IdNumber Keyboard + +Use `extra-key` prop to set the content of bottom left button + +```html + + Show IdNumber Keyboard + + + +``` + +### Keyboard With Title + +Use `title` prop to set keyboard title + +```html + + Show Keyboard With Title + + +``` + ### Bind Value ```html @@ -70,7 +106,6 @@ export default { :value="value" @touchstart.native.stop="show = true" /> - - Show Id Card Number Keyboard - - - -``` - -### Keyboard Title - -Use `title` prop to set keyboard title - -```html - - Show Custom Title Keyboard - - - -``` - ## API ### Props | Attribute | Description | Type | Default | | --- | --- | --- | --- | -| v-model `v2.0.2` | Current value | _string_ | - | +| v-model (value) `v2.0.2` | Current value | _string_ | - | | show | Whether to show keyboard | _boolean_ | - | -| theme | Keyboard theme，can be set to `default` `custom` | _string_ | `default` | +| theme | Keyboard theme，can be set to `custom` | _string_ | `default` | | title | Keyboard title | _string_ | - | | maxlength `v2.0.2` | Value maxlength | _number \| string_ | - | | transition | Whether to show transition animation | _boolean_ | `true` | | z-index | Keyboard z-index | _number \| string_ | `100` | | extra-key | Content of bottom left key | _string_ | `''` | -| close-button-text | Close button text | _string_ | `-` | -| delete-button-text | Delete button text | _string_ | `delete` | +| close-button-text | Close button text | _string_ | - | +| delete-button-text | Delete button text | _string_ | Delete Icon | | show-delete-key `v2.5.9` | Whether to show delete button | _boolean_ | `true` | | hide-on-click-outside | Whether to hide keyboard when click outside | _boolean_ | `true` | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` | @@ -157,8 +153,8 @@ Use `title` prop to set keyboard title | delete | Triggered when press delete key | - | | close | Triggered when click close button | - | | blur | Triggered when click close button or blur keyboard | - | -| show | Triggered when keyboard is fully displayed. | - | -| hide | Triggered when keyboard is fully hidden. | - | +| show | Triggered when keyboard is fully displayed | - | +| hide | Triggered when keyboard is fully hidden | - | ### Slots diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 257a4d8f1..7579cbe19 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -数字键盘，提供两种样式风格，可以与[密码输入框](#/zh-CN/password-input)或自定义的输入框组件配合使用 +数字虚拟键盘，可以配合[密码输入框组件](#/zh-CN/password-input)或自定义的输入框组件使用 ### 引入 @@ -17,14 +17,14 @@ Vue.use(NumberKeyboard); ### 默认样式 +数字键盘提供了 `input`、`delete`、`blur` 事件，分别对应输入内容、删除内容和失去焦点的动作 + ```html - + 弹出默认键盘 - + 点击键盘以外的区域时，键盘会自动收起，通过阻止元素上的 touchstart 事件冒泡可以避免键盘收起。 + +### 带右侧栏的键盘 + +将 theme 属性设置为 `custom` 来展示键盘的右侧栏，常用于输入金额的场景 ```html ``` +### 身份证号键盘 + +通过 `extra-key` 属性可以设置左下角按键内容，比如需要输入身份证号时，可以将 `extra-key` 设置为 `X` + +```html + + 弹出身份证号键盘 + + +``` + +### 键盘标题 + +通过 `title` 属性可以设置键盘标题 + +```html + + 弹出带标题的键盘 + + +``` + ### 双向绑定 -可以通过`v-model`绑定键盘当前输入值 +可以通过 `v-model` 绑定键盘当前输入值 ```html - - 弹出身份证号码键盘 - - - -``` - -### 键盘标题 - -通过`title`属性可以设置键盘标题 - -```html - - 弹出自定义标题键盘 - - - -``` - ## API ### Props | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| v-model `v2.0.2` | 当前输入值 | _string_ | - | +| v-model (value) `v2.0.2` | 当前输入值 | _string_ | - | | show | 是否显示键盘 | _boolean_ | - | -| theme | 样式风格，可选值为 `default` `custom` | _string_ | `default` | +| theme | 样式风格，可选值为 `custom` | _string_ | `default` | | title | 键盘标题 | _string_ | - | | maxlength `v2.0.2` | 输入值最大长度 | _number \| string_ | - | | transition | 是否开启过场动画 | _boolean_ | `true` | | z-index | 键盘 z-index | _number \| string_ | `100` | | extra-key | 左下角按键内容 | _string_ | `''` | -| close-button-text | 关闭按钮文字，空则不展示 | _string_ | `-` | -| delete-button-text | 删除按钮文字 | _string_ | `删除` | -| show-delete-key `v2.5.9` | 是否展示删除按钮 | _boolean_ | `true` | +| close-button-text | 关闭按钮文字，空则不展示 | _string_ | - | +| delete-button-text | 删除按钮文字，空则展示删除图标 | _string_ | - | +| show-delete-key `v2.5.9` | 是否展示删除图标 | _boolean_ | `true` | | hide-on-click-outside | 点击外部时是否收起键盘 | _boolean_ | `true` | | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` | diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue index 5e62cdb3f..31e09c3dc 100644 --- a/src/number-keyboard/demo/index.vue +++ b/src/number-keyboard/demo/index.vue @@ -1,85 +1,68 @@ @@ -87,32 +70,28 @@ export default { i18n: { 'zh-CN': { - default: '默认样式', - custom: '自定义样式', - button1: '弹出默认键盘', - button2: '弹出自定义键盘', - button3: '弹出身份证号码键盘', - button4: '弹出自定义标题键盘', close: '完成', input: '输入', + title: '键盘标题', + button1: '弹出默认键盘', + button2: '弹出带右侧栏的键盘', + button3: '弹出身份证号键盘', + button4: '弹出带标题的键盘', bindValue: '双向绑定', 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', + title: 'Keyboard Title', + button1: 'Show Default Keyboard', + button2: 'Show Keyboard With Sidebar', + button3: 'Show IdNumber Keyboard', + button4: 'Show Keyboard With Title', bindValue: 'Bind Value', clickToInput: 'Click To Input', - extraKey: 'Bottom Left Button Content', - title: 'Keyboard Title', + extraKey: 'IdNumber Keyboard', }, }, @@ -140,7 +119,6 @@ export default { .demo-number-keyboard { padding-bottom: 300px; - background: @white; .van-button { margin-left: @padding-md; diff --git a/src/number-keyboard/index.js b/src/number-keyboard/index.js index d12001589..55cbc8bc9 100644 --- a/src/number-keyboard/index.js +++ b/src/number-keyboard/index.js @@ -79,7 +79,7 @@ export default createComponent({ { text: this.extraKey, type: 'extra', color: 'gray' }, { text: 0 }, { - text: this.showDeleteKey ? this.deleteText : '', + text: this.showDeleteKey ? this.deleteButtonText : '', type: this.showDeleteKey ? 'delete' : '', color: 'gray', } @@ -95,10 +95,6 @@ export default createComponent({ return keys; }, - - deleteText() { - return this.deleteButtonText || t('delete'); - }, }, methods: { @@ -184,8 +180,9 @@ export default createComponent({ {this.showDeleteKey && ( {this.slots('delete')} diff --git a/src/number-keyboard/index.less b/src/number-keyboard/index.less index a04613d02..aff942b18 100644 --- a/src/number-keyboard/index.less +++ b/src/number-keyboard/index.less @@ -117,4 +117,9 @@ flex-basis: 66%; } } + + &__delete-icon { + width: 32px; + height: 22px; + } } diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap index d20850303..dfb60ac58 100644 --- a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap +++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap @@ -2,245 +2,259 @@ exports[`renders demo correctly 1`] = `
-
-
-
完成
-
-
-
-
1
-
-
-
2
-
-
-
3
-
-
-
4
-
-
-
5
-
-
-
6
-
-
-
7
-
-
-
8
-
-
-
9
-
-
-
.
-
-
-
0
-
-
-
删除
-
+
+ +
+
+
+ 弹出带右侧栏的键盘 +
+ +
+
+
+ 弹出身份证号键盘 +
+ +
+
+
+ 弹出带标题的键盘 +
+ +
+
+
双向绑定
+
+
+
+
+
+
+
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+
7
+
+
+
8
+
+
+
9
+
+
+
+
+
+
0
+
+
+
+ +
-
- @@ -309,7 +321,9 @@ exports[`render title 1`] = `
0
-
删除
+
+ +
@@ -355,7 +369,9 @@ exports[`title-left slot 1`] = `
0
-
删除
+
+ +
diff --git a/src/password-input/test/__snapshots__/demo.spec.js.snap b/src/password-input/test/__snapshots__/demo.spec.js.snap index f92c3e5e6..a201c44c3 100644 --- a/src/password-input/test/__snapshots__/demo.spec.js.snap +++ b/src/password-input/test/__snapshots__/demo.spec.js.snap @@ -53,7 +53,9 @@ exports[`renders demo correctly 1`] = `
0
-
删除
+
+ +