mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] NumberKeyboard: add close-button-text prop (#2051)
This commit is contained in:
neverland
GitHub
parent
c2af18f6d3
commit
b5cdfc3ac5
@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<i
|
||||
v-text="text"
|
||||
:class="['van-hairline', className]"
|
||||
@touchstart.stop.prevent="onFocus"
|
||||
@touchmove="onBlur"
|
||||
@touchend="onBlur"
|
||||
@touchcancel="onBlur"
|
||||
class="van-hairline"
|
||||
:class="[b(), className]"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -34,8 +33,7 @@ export default create({
|
||||
className() {
|
||||
const types = this.type.slice(0);
|
||||
this.active && types.push('active');
|
||||
|
||||
return types.map(type => this.b([type]));
|
||||
return this.b(types);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -70,6 +70,7 @@ export default {
|
||||
| z-index | Keyboard z-index | `Number` | `100` |
|
||||
| extra-key | Content of bottom left key | `String` | `''` |
|
||||
| close-button-text | Close button text | `String` | `-` |
|
||||
| delete-button-text | Delete button text | `String` | `delete` |
|
||||
| show-delete-key | Whether to show delete button | `Boolean` | `true` |
|
||||
| hide-on-click-outside | Whether to hide keyboard when click outside | `Boolean` | `true` |
|
||||
|
||||
|
||||
@ -73,8 +73,12 @@
|
||||
line-height: @number-keyboard-key-height * 2;
|
||||
}
|
||||
|
||||
&--blue,
|
||||
&--delete {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&--blue {
|
||||
font-size: 20px;
|
||||
color: @white;
|
||||
background-color: @blue;
|
||||
|
||||
@ -87,14 +91,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&--delete {
|
||||
font-size: 0;
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAeCAMAAABg6AyVAAAAbFBMVEUAAAAfHiIdHB4eHR8dHR4eHB4dHB4dHR8gICIdHB4dHB4dHB4dHB8eHh8hISEeHR8fHB8fHR8fHR8fHx8eHiArKyszMzMeHB8eHB8fHR8eHiAeHh4dHB4vLjDY2Nn////b29zKysq9vb28vLzkfBRpAAAAHHRSTlMAK/PW+I/llBv77N1kSCPwWlFAOTMGBb28hHlu08g5sgAAAMlJREFUOMuV1MsWgiAQgGHQyOx+s+sgYO//jnnMGIdDDfwbN99CYEDQFiVEKkolPUG7gl9VTWC31NKuDbVz+Fc1tRJtPDmxS2BS3p5ZC+XXnnbAVoz2WEBCH7uZAalzGoa06whGiznT6sG2xgX4QO2Aej1+KN7XBKL2FvGaMtTWBhbQhtoaYzVQrHKwuGf8hhAPSF5g3xPSt45sCHcouNWx436FGA+RHyQcD35EcUj54U8ff4WYvVi1zLjelUh/OG6XjOeLWv5hfAOI+HLwwOAqhAAAAABJRU5ErkJggg==") no-repeat center center;
|
||||
background-size: auto 15px;
|
||||
}
|
||||
|
||||
&--gray {
|
||||
background-color: @background-color;
|
||||
background-color: @number-keyboard-key-background;
|
||||
}
|
||||
|
||||
&--active {
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div v-if="theme === 'custom'" :class="b('sidebar')">
|
||||
<key :text="'delete'" :type="['delete', 'big']" @press="onPressKey" />
|
||||
<key :text="deleteText" :type="['delete', 'big', 'gray']" @press="onPressKey" />
|
||||
<key :text="closeButtonText" :type="['blue', 'big']" @press="onPressKey" />
|
||||
</div>
|
||||
</div>
|
||||
@ -47,6 +47,7 @@ export default create({
|
||||
show: Boolean,
|
||||
title: String,
|
||||
closeButtonText: String,
|
||||
deleteButtonText: String,
|
||||
theme: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
@ -109,7 +110,7 @@ export default create({
|
||||
keys.push(
|
||||
{ text: this.extraKey, type: ['gray'] },
|
||||
{ text: 0 },
|
||||
{ text: 'delete', type: ['gray', 'delete'] }
|
||||
{ text: this.deleteText, type: ['gray', 'delete'] }
|
||||
);
|
||||
break;
|
||||
case 'custom':
|
||||
@ -131,6 +132,10 @@ export default create({
|
||||
|
||||
showTitleClose() {
|
||||
return this.closeButtonText && this.theme === 'default';
|
||||
},
|
||||
|
||||
deleteText() {
|
||||
return this.deleteButtonText || this.$t('delete');
|
||||
}
|
||||
},
|
||||
|
||||
@ -165,7 +170,7 @@ export default create({
|
||||
return;
|
||||
}
|
||||
|
||||
if (text === 'delete') {
|
||||
if (text === this.deleteText) {
|
||||
this.$emit('delete');
|
||||
} else if (text === this.closeButtonText) {
|
||||
this.onClose();
|
||||
|
||||
@ -18,9 +18,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<i class="van-hairline van-key">7</i>
|
||||
<i class="van-hairline van-key">8</i>
|
||||
<i class="van-hairline van-key">9</i>
|
||||
<i class="van-hairline van-key van-key van-key--gray">.</i>
|
||||
<i class="van-hairline van-key van-key--gray">.</i>
|
||||
<i class="van-hairline van-key">0</i>
|
||||
<i class="van-hairline van-key van-key van-key--gray van-key van-key--delete">delete</i>
|
||||
<i class="van-hairline van-key van-key--gray van-key--delete">删除</i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
@ -41,12 +41,12 @@ exports[`renders demo correctly 1`] = `
|
||||
<i class="van-hairline van-key">7</i>
|
||||
<i class="van-hairline van-key">8</i>
|
||||
<i class="van-hairline van-key">9</i>
|
||||
<i class="van-hairline van-key van-key van-key--middle">0</i>
|
||||
<i class="van-hairline van-key van-key--middle">0</i>
|
||||
<i class="van-hairline van-key">.</i>
|
||||
</div>
|
||||
<div class="van-number-keyboard__sidebar">
|
||||
<i class="van-hairline van-key van-key van-key--delete van-key van-key--big">delete</i>
|
||||
<i class="van-hairline van-key van-key van-key--blue van-key van-key--big">完成</i>
|
||||
<i class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i>
|
||||
<i class="van-hairline van-key van-key--blue van-key--big">完成</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -70,6 +70,7 @@ export default {
|
||||
| z-index | 键盘 z-index | `Number` | `100` | - |
|
||||
| extra-key | 左下角按键内容 | `String` | `''` | - |
|
||||
| close-button-text | 关闭按钮文字，空则不展示 | `String` | `-` | - |
|
||||
| delete-button-text | 删除按钮文字 | `String` | `删除` | 1.4.3 |
|
||||
| show-delete-key | 是否展示删除按钮 | `Boolean` | `true` | - |
|
||||
| hide-on-click-outside | 点击外部时是否收起键盘 | `Boolean` | `true` | - |
|
||||
|
||||
|
||||
@ -38,9 +38,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<i class="van-hairline van-key">7</i>
|
||||
<i class="van-hairline van-key">8</i>
|
||||
<i class="van-hairline van-key">9</i>
|
||||
<i class="van-hairline van-key van-key van-key--gray"></i>
|
||||
<i class="van-hairline van-key van-key--gray"></i>
|
||||
<i class="van-hairline van-key">0</i>
|
||||
<i class="van-hairline van-key van-key van-key--gray van-key van-key--delete">delete</i>
|
||||
<i class="van-hairline van-key van-key--gray van-key--delete">删除</i>
|
||||
</div>
|
||||
<!---->
|
||||
</div>
|
||||
|
||||
@ -52,3 +52,4 @@
|
||||
|
||||
// number keyboard
|
||||
@number-keyboard-key-height: 54px;
|
||||
@number-keyboard-key-background: #eBedf0;
|
||||
Loading…
x
Reference in New Issue
Block a user