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

refactor(NumberKeyboard): new style

Browse Source
This commit is contained in:
chenjiahan 2020-04-19 21:05:55 +08:00
parent 422a0f6402
commit 3188b4d25b
8 changed files with 680 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/number-keyboard/Key.js
View File

@ -1,6 +1,5 @@
import { createNamespace } from '../utils';
import { TouchMixin } from '../mixins/touch';
import { BORDER } from '../utils/constant';
const [createComponent, bem] = createNamespace('key');
@ -10,10 +9,9 @@ export default createComponent({
props: {
type: String,
text: [Number, String],
theme: {
type: Array,
default: () => [],
},
color: String,
wider: Boolean,
large: Boolean,
},
data() {
@ -22,22 +20,6 @@ export default createComponent({
};
},
computed: {
className() {
const classNames = this.theme.slice(0);
if (this.active) {
classNames.push('active');
}
if (this.type) {
classNames.push(this.type);
}
return bem(classNames);
},
},
mounted() {
this.bindTouchEvent(this.$el);
},
@ -69,9 +51,22 @@ export default createComponent({
render() {
return (
<i role="button" tabindex="0" class={[BORDER, this.className]}>
{this.slots('default') || this.text}
</i>
<div class={bem('wrapper', { wider: this.wider })}>
<div
role="button"
tabindex="0"
class={bem([
this.color,
{
large: this.large,
active: this.active,
delete: this.type === 'delete',
},
])}
>
{this.slots('default') || this.text}
</div>
</div>
);
},
});

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

@ -32,13 +32,15 @@
</demo-block>
<demo-block :title="t('bindValue')">
<van-field
readonly
clickable
:value="value"
:placeholder="t('clickToInput')"
@touchstart.native.stop="keyboard = 'bindValue'"
/>
<van-cell-group>
<van-field
readonly
clickable
:value="value"
:placeholder="t('clickToInput')"
@touchstart.native.stop="keyboard = 'bindValue'"
/>
</van-cell-group>
<van-number-keyboard
v-model="value"
@ -138,6 +140,7 @@ export default {
.demo-number-keyboard {
padding-bottom: 300px;
background: @white;
.van-button {
margin-left: @padding-md;

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

@ -1,12 +1,9 @@
import { createNamespace } from '../utils';
import { stopPropagation } from '../utils/dom/event';
import { BORDER_TOP } from '../utils/constant';
import { BindEventMixin } from '../mixins/bind-event';
import Key from './Key';
const [createComponent, bem, t] = createNamespace('number-keyboard');
const CLOSE_KEY_THEME = ['blue', 'big'];
const DELETE_KEY_THEME = ['delete', 'big', 'gray'];
export default createComponent({
mixins: [
@ -79,18 +76,18 @@ export default createComponent({
switch (this.theme) {
case 'default':
keys.push(
{ text: this.extraKey, theme: ['gray'], type: 'extra' },
{ text: this.extraKey, type: 'extra', color: 'gray' },
{ text: 0 },
{
theme: ['gray'],
text: this.showDeleteKey ? this.deleteText : '',
type: this.showDeleteKey ? 'delete' : '',
color: 'gray',
}
);
break;
case 'custom':
keys.push(
{ text: 0, theme: ['middle'] },
{ text: 0, wider: true },
{ text: this.extraKey, type: 'extra' }
);
break;
@ -147,7 +144,7 @@ export default createComponent({
}
return (
<div class={[bem('title'), BORDER_TOP]}>
<div class={bem('title')}>
{titleLeft && <span class={bem('title-left')}>{titleLeft}</span>}
{title && <span>{title}</span>}
{showClose && (
@ -170,7 +167,8 @@ export default createComponent({
key={key.text}
text={key.text}
type={key.type}
theme={key.theme}
wider={key.wider}
color={key.color}
onPress={this.onPress}
>
{key.type === 'delete' && this.slots('delete')}
@ -185,18 +183,19 @@ export default createComponent({
<div class={bem('sidebar')}>
{this.showDeleteKey && (
<Key
large
text={this.deleteText}
type="delete"
theme={DELETE_KEY_THEME}
onPress={this.onPress}
>
{this.slots('delete')}
</Key>
)}
<Key
large
text={this.closeButtonText}
type="close"
theme={CLOSE_KEY_THEME}
color="blue"
onPress={this.onPress}
/>
</div>
@ -206,19 +205,21 @@ export default createComponent({
},
render() {
const Title = this.genTitle();
return (
<transition name={this.transition ? 'van-slide-up' : ''}>
<div
vShow={this.show}
style={{ zIndex: this.zIndex }}
class={bem([this.theme, { unfit: !this.safeAreaInsetBottom }])}
class={bem({ unfit: !this.safeAreaInsetBottom, 'with-title': Title })}
onTouchstart={stopPropagation}
onAnimationend={this.onAnimationEnd}
onWebkitAnimationEnd={this.onAnimationEnd}
>
{this.genTitle()}
{Title}
<div class={bem('body')}>
{this.genKeys()}
<div class={bem('keys')}>{this.genKeys()}</div>
{this.genSidebar()}
</div>
</div>

95
src/number-keyboard/index.less
View File

@ -11,9 +11,15 @@
background-color: @number-keyboard-background-color;
user-select: none;
&--with-title {
border-radius: 20px 20px 0 0;
}
&__title {
position: relative;
box-sizing: content-box;
height: @number-keyboard-title-height;
padding-top: 6px;
color: @number-keyboard-title-color;
font-size: @number-keyboard-title-font-size;
line-height: @number-keyboard-title-height;
@ -26,8 +32,14 @@
}
&__body {
position: relative;
box-sizing: border-box;
display: flex;
padding: 6px 0 0 6px;
}
&__keys {
display: flex;
flex: 3;
flex-wrap: wrap;
}
&__close {
@ -39,24 +51,14 @@
cursor: pointer;
&:active {
background-color: @number-keyboard-key-active-color;
opacity: @active-opacity;
}
}
&__sidebar {
position: absolute;
right: 0;
bottom: 0;
display: flex;
flex: 1;
flex-direction: column;
width: 25%;
height: @number-keyboard-key-height * 4;
}
&--custom {
.van-number-keyboard__body {
padding-right: 25%;
}
}
&--unfit {
@ -65,30 +67,18 @@
}
.van-key {
display: inline-block;
width: 100% / 3;
display: flex;
align-items: center;
justify-content: center;
height: @number-keyboard-key-height;
font-size: @number-keyboard-key-font-size;
font-style: normal;
line-height: @number-keyboard-key-height;
text-align: center;
vertical-align: middle;
line-height: 1.5;
background-color: @white;
border-radius: @border-radius-lg;
cursor: pointer;
&::after {
border-width: @border-width-base @border-width-base 0 0;
}
&--middle {
width: 200% / 3;
}
&--big {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
width: 100%;
&--large {
height: 100%;
}
&--blue,
@ -96,23 +86,6 @@
font-size: @number-keyboard-delete-font-size;
}
&--blue {
color: @number-keyboard-button-text-color;
background-color: @number-keyboard-button-background-color;
&.van-key--active {
background-color: @number-keyboard-button-background-color;
}
&::after {
border-color: @number-keyboard-button-background-color;
}
&:active {
background-color: darken(@number-keyboard-button-background-color, 10%);
}
}
&--gray {
background-color: @number-keyboard-key-background;
}
@ -120,4 +93,24 @@
&--active {
background-color: @number-keyboard-key-active-color;
}
&--blue {
color: @number-keyboard-button-text-color;
background-color: @number-keyboard-button-background-color;
&.van-key--active {
background-color: darken(@number-keyboard-button-background-color, 10%);
}
}
&__wrapper {
flex: 1;
flex-basis: 33%;
box-sizing: border-box;
padding: 0 6px 6px 0;
&--wider {
flex-basis: 66%;
}
}
}

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

@ -5,44 +5,244 @@ exports[`renders demo correctly 1`] = `
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
弹出默认键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--default" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
<div class="van-number-keyboard van-number-keyboard--with-title" name="van-slide-up">
<div class="van-number-keyboard__title"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray">.</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
</div>
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
弹出自定义键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--custom" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--extra">.</i>
<div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></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">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper van-key__wrapper--wider">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">.</div>
</div>
</div>
<div class="van-number-keyboard__sidebar">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--large van-key--delete">删除</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--blue van-key--large">完成</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="点此输入" class="van-field__control"></div>
<div class="van-cell-group van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__value van-cell__value--alone van-field__value">
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="点此输入" class="van-field__control"></div>
</div>
</div>
</div>
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></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">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
</div>
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
弹出身份证号码键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">X</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
<div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray">X</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
</div>
<div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">
弹出自定义标题键盘
</span></button>
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
<div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray">.</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
</div>
</div>

348
src/number-keyboard/test/__snapshots__/index.spec.js.snap
View File

@ -1,51 +1,363 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`extra-key slot 1`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">Custom Extra Key</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></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">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray">Custom Extra Key</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
`;
exports[`focus on key 1`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></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">
<div role="button" tabindex="0" class="van-key van-key--active">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
`;
exports[`focus on key 2`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></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">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
`;
exports[`move and blur key 1`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></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">
<div role="button" tabindex="0" class="van-key van-key--active">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
`;
exports[`move and blur key 2`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></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">
<div role="button" tabindex="0" class="van-key van-key--active">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
`;
exports[`move and blur key 3`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></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">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
`;
exports[`render title 1`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span>Title</span><span role="button" tabindex="0" class="van-number-keyboard__close">Close</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
<div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title"><span>Title</span><span role="button" tabindex="0" class="van-number-keyboard__close">Close</span></div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
`;
exports[`title-left slot 1`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
<div class="van-number-keyboard van-number-keyboard--with-title" style="display: none;" name="van-slide-up">
<div class="van-number-keyboard__title"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
`;

43
src/password-input/test/__snapshots__/demo.spec.js.snap
View File

@ -16,8 +16,47 @@ exports[`renders demo correctly 1`] = `
</ul>
<div class="van-password-input__info">密码为 6 位数字</div>
</div>
<div class="van-number-keyboard van-number-keyboard--default" name="van-slide-up">
<div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
<div class="van-number-keyboard" name="van-slide-up">
<div class="van-number-keyboard__body">
<div class="van-number-keyboard__keys">
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">1</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">2</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">3</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">4</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">5</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">6</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">7</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">8</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">9</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray"></div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key">0</div>
</div>
<div class="van-key__wrapper">
<div role="button" tabindex="0" class="van-key van-key--gray van-key--delete">删除</div>
</div>
</div>
</div>
</div>
</div>
<div>

10
src/style/var.less
View File

@ -475,11 +475,11 @@
@notify-warning-background-color: @orange;
// NumberKeyboard
@number-keyboard-background-color: @white;
@number-keyboard-key-height: 54px;
@number-keyboard-key-background: @gray-3;
@number-keyboard-key-font-size: 24px;
@number-keyboard-key-active-color: @active-color;
@number-keyboard-background-color: @background-color;
@number-keyboard-key-height: 56px;
@number-keyboard-key-background: @gray-2;
@number-keyboard-key-font-size: 28px;
@number-keyboard-key-active-color: @gray-3;
@number-keyboard-delete-font-size: @font-size-lg;
@number-keyboard-title-color: @gray-7;
@number-keyboard-title-height: 30px;