blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(NumberKeyboard): support multiple extra key (#6276)

Browse Source
This commit is contained in:
neverland 2020-05-13 21:02:13 +08:00 committed by GitHub
parent 44911c3739
commit cf9f2f9bd2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 128 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/number-keyboard/README.md
View File

@ -97,6 +97,22 @@ Use `title` prop to set keyboard title
/>
```
### Multiple ExtraKey
```html
<van-cell plain type="primary" @touchstart.native.stop="show = true">
Show Keyboard With Multiple ExtraKey
</van-cell>
<van-number-keyboard
:show="show"
:extra-key="['00', '.']"
close-button-text="Close"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
```
### Bind Value
```html
@ -138,7 +154,7 @@ export default {
| 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_ | `''` |
| extra-key `v2.8.2` | Content of bottom left key | _string \| string[]_ | `''` |
| close-button-text | Close button text | _string_ | - |
| delete-button-text | Delete button text | _string_ | Delete Icon |
| close-button-loading `v2.7.0` | Whether to show loading close button in custom theme | _boolean_ | `false` |

20
src/number-keyboard/README.zh-CN.md
View File

@ -106,6 +106,24 @@ export default {
/>
```
### 配置多个按键
当 theme 为 `custom` 时，支持以数组的形式配置两个 `extra-key`
```html
<van-cell plain type="primary" @touchstart.native.stop="show = true">
弹出配置多个按键的键盘
</van-cell>
<van-number-keyboard
:show="show"
:extra-key="['00', '.']"
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
```
### 双向绑定
可以通过 `v-model` 绑定键盘当前输入值
@ -149,7 +167,7 @@ export default {
| maxlength `v2.0.2` | 输入值最大长度 | _number \| string_ | - |
| transition | 是否开启过场动画 | _boolean_ | `true` |
| z-index | 键盘 z-index 层级 | _number \| string_ | `100` |
| extra-key | 左下角按键内容 | _string_ | `''` |
| extra-key `v2.8.2` | 底部额外按键的内容 | _string \| string[]_ | `''` |
| close-button-text | 关闭按钮文字，空则不展示 | _string_ | - |
| delete-button-text | 删除按钮文字，空则展示删除图标 | _string_ | - |
| close-button-loading `v2.7.0` | 是否将关闭按钮设置为加载中状态，仅在 `theme="custom"` 时有效 | _boolean_ | `false` |

17
src/number-keyboard/demo/index.vue
View File

@ -12,6 +12,9 @@
<van-cell is-link @touchstart.native.stop="keyboard = 'title'">
{{ t('button4') }}
</van-cell>
<van-cell is-link @touchstart.native.stop="keyboard = 'multiExtraKey'">
{{ t('button5') }}
</van-cell>
<van-field
readonly
clickable
@ -57,6 +60,16 @@
@delete="onDelete"
/>
<van-number-keyboard
:show="keyboard === 'multiExtraKey'"
:close-button-text="t('close')"
theme="custom"
:extra-key="['00', '.']"
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
/>
<van-number-keyboard
v-model="value"
:show="keyboard === 'bindValue'"
@ -77,9 +90,11 @@ export default {
button2: '弹出带右侧栏的键盘',
button3: '弹出身份证号键盘',
button4: '弹出带标题的键盘',
button5: '弹出配置多个按键的键盘',
bindValue: '双向绑定',
clickToInput: '点此输入',
extraKey: '左下角按键内容',
multiExtraKey: '配置多个按键',
},
'en-US': {
close: 'Close',
@ -89,9 +104,11 @@ export default {
button2: 'Show Keyboard With Sidebar',
button3: 'Show IdNumber Keyboard',
button4: 'Show Keyboard With Title',
button5: 'Show Keyboard With Multiple ExtraKey',
bindValue: 'Bind Value',
clickToInput: 'Click To Input',
extraKey: 'IdNumber Keyboard',
multiExtraKey: 'Multiple ExtraKey',
},
},

70
src/number-keyboard/index.js
View File

@ -34,7 +34,7 @@ export default createComponent({
default: '',
},
extraKey: {
type: String,
type: [String, Array],
default: '',
},
maxlength: {
@ -69,35 +69,55 @@ export default createComponent({
computed: {
keys() {
const keys = [];
for (let i = 1; i <= 9; i++) {
keys.push({ text: i });
if (this.theme === 'custom') {
return this.genCustomKeys();
}
switch (this.theme) {
case 'default':
keys.push(
{ text: this.extraKey, type: 'extra' },
{ text: 0 },
{
text: this.showDeleteKey ? this.deleteButtonText : '',
type: this.showDeleteKey ? 'delete' : '',
}
);
break;
case 'custom':
keys.push(
{ text: 0, wider: true },
{ text: this.extraKey, type: 'extra' }
);
break;
}
return keys;
return this.genDefaultKeys();
},
},
methods: {
genBasicKeys() {
const keys = [];
for (let i = 1; i <= 9; i++) {
keys.push({ text: i });
}
return keys;
},
genDefaultKeys() {
return [
...this.genBasicKeys(),
{ text: this.extraKey, type: 'extra' },
{ text: 0 },
{
text: this.showDeleteKey ? this.deleteButtonText : '',
type: this.showDeleteKey ? 'delete' : '',
},
];
},
genCustomKeys() {
const keys = this.genBasicKeys();
const { extraKey } = this;
const extraKeys = Array.isArray(extraKey) ? extraKey : [extraKey];
if (extraKeys.length === 1) {
keys.push(
{ text: 0, wider: true },
{ text: extraKey[0], type: 'extra' }
);
} else if (extraKeys.length === 2) {
keys.push(
{ text: extraKey[0], type: 'extra' },
{ text: 0 },
{ text: extraKey[1], type: 'extra' }
);
}
return keys;
},
onBlur() {
this.show && this.$emit('blur');
},

30
src/number-keyboard/test/__snapshots__/demo.spec.js.snap
View File

@ -26,6 +26,12 @@ exports[`renders demo correctly 1`] = `
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__value van-cell__value--alone">
弹出配置多个按键的键盘
</div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>双向绑定</span></div>
<div class="van-cell__value van-field__value">
@ -121,6 +127,30 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper"><button type="button" class="van-key">1</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">2</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">3</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">4</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">5</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">6</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">7</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">8</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">9</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">00</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">0</button></div>
<div class="van-key__wrapper"><button type="button" class="van-key">.</button></div>
</div>
<div class="van-number-keyboard__sidebar">
<div class="van-key__wrapper"><button type="button" class="van-key van-key--large van-key--delete"><svg viewBox="0 0 32 22" xmlns="http://www.w3.org/2000/svg" class="van-key__delete-icon">
<path d="M28.016 0A3.991 3.991 0 0132 3.987v14.026c0 2.2-1.787 3.987-3.98 3.987H10.382c-.509 0-.996-.206-1.374-.585L.89 13.09C.33 12.62 0 11.84 0 11.006c0-.86.325-1.62.887-2.08L9.01.585A1.936 1.936 0 0110.383 0zm0 1.947H10.368L2.24 10.28c-.224.226-.312.432-.312.73 0 .287.094.51.312.729l8.128 8.333h17.648a2.041 2.041 0 002.037-2.04V3.987c0-1.127-.915-2.04-2.037-2.04zM23.028 6a.96.96 0 01.678.292.95.95 0 01-.003 1.377l-3.342 3.348 3.326 3.333c.189.188.292.43.292.679 0 .248-.103.49-.292.679a.96.96 0 01-.678.292.959.959 0 01-.677-.292L18.99 12.36l-3.343 3.345a.96.96 0 01-.677.292.96.96 0 01-.678-.292.962.962 0 01-.292-.68c0-.248.104-.49.292-.679l3.342-3.348-3.342-3.348A.963.963 0 0114 6.971c0-.248.104-.49.292-.679A.96.96 0 0114.97 6a.96.96 0 01.677.292l3.358 3.348 3.345-3.348A.96.96 0 0123.028 6z" fill="currentColor"></path>
</svg></button></div>
<div class="van-key__wrapper"><button type="button" class="van-key van-key--blue van-key--large">完成</button></div>
</div>
</div>
</div>
<div class="van-number-keyboard" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">