mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
refactor(NumberKeyboard): new style
This commit is contained in:
chenjiahan
parent
422a0f6402
commit
3188b4d25b
@ -1,6 +1,5 @@
|
|||||||
import { createNamespace } from '../utils';
|
import { createNamespace } from '../utils';
|
||||||
import { TouchMixin } from '../mixins/touch';
|
import { TouchMixin } from '../mixins/touch';
|
||||||
import { BORDER } from '../utils/constant';
|
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('key');
|
const [createComponent, bem] = createNamespace('key');
|
||||||
|
|
||||||
@ -10,10 +9,9 @@ export default createComponent({
|
|||||||
props: {
|
props: {
|
||||||
type: String,
|
type: String,
|
||||||
text: [Number, String],
|
text: [Number, String],
|
||||||
theme: {
|
color: String,
|
||||||
type: Array,
|
wider: Boolean,
|
||||||
default: () => [],
|
large: Boolean,
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
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() {
|
mounted() {
|
||||||
this.bindTouchEvent(this.$el);
|
this.bindTouchEvent(this.$el);
|
||||||
},
|
},
|
||||||
@ -69,9 +51,22 @@ export default createComponent({
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<i role="button" tabindex="0" class={[BORDER, this.className]}>
|
<div class={bem('wrapper', { wider: this.wider })}>
|
||||||
{this.slots('default') || this.text}
|
<div
|
||||||
</i>
|
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>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -32,13 +32,15 @@
|
|||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="t('bindValue')">
|
<demo-block :title="t('bindValue')">
|
||||||
<van-field
|
<van-cell-group>
|
||||||
readonly
|
<van-field
|
||||||
clickable
|
readonly
|
||||||
:value="value"
|
clickable
|
||||||
:placeholder="t('clickToInput')"
|
:value="value"
|
||||||
@touchstart.native.stop="keyboard = 'bindValue'"
|
:placeholder="t('clickToInput')"
|
||||||
/>
|
@touchstart.native.stop="keyboard = 'bindValue'"
|
||||||
|
/>
|
||||||
|
</van-cell-group>
|
||||||
|
|
||||||
<van-number-keyboard
|
<van-number-keyboard
|
||||||
v-model="value"
|
v-model="value"
|
||||||
@ -138,6 +140,7 @@ export default {
|
|||||||
|
|
||||||
.demo-number-keyboard {
|
.demo-number-keyboard {
|
||||||
padding-bottom: 300px;
|
padding-bottom: 300px;
|
||||||
|
background: @white;
|
||||||
|
|
||||||
.van-button {
|
.van-button {
|
||||||
margin-left: @padding-md;
|
margin-left: @padding-md;
|
||||||
|
|||||||
@ -1,12 +1,9 @@
|
|||||||
import { createNamespace } from '../utils';
|
import { createNamespace } from '../utils';
|
||||||
import { stopPropagation } from '../utils/dom/event';
|
import { stopPropagation } from '../utils/dom/event';
|
||||||
import { BORDER_TOP } from '../utils/constant';
|
|
||||||
import { BindEventMixin } from '../mixins/bind-event';
|
import { BindEventMixin } from '../mixins/bind-event';
|
||||||
import Key from './Key';
|
import Key from './Key';
|
||||||
|
|
||||||
const [createComponent, bem, t] = createNamespace('number-keyboard');
|
const [createComponent, bem, t] = createNamespace('number-keyboard');
|
||||||
const CLOSE_KEY_THEME = ['blue', 'big'];
|
|
||||||
const DELETE_KEY_THEME = ['delete', 'big', 'gray'];
|
|
||||||
|
|
||||||
export default createComponent({
|
export default createComponent({
|
||||||
mixins: [
|
mixins: [
|
||||||
@ -79,18 +76,18 @@ export default createComponent({
|
|||||||
switch (this.theme) {
|
switch (this.theme) {
|
||||||
case 'default':
|
case 'default':
|
||||||
keys.push(
|
keys.push(
|
||||||
{ text: this.extraKey, theme: ['gray'], type: 'extra' },
|
{ text: this.extraKey, type: 'extra', color: 'gray' },
|
||||||
{ text: 0 },
|
{ text: 0 },
|
||||||
{
|
{
|
||||||
theme: ['gray'],
|
|
||||||
text: this.showDeleteKey ? this.deleteText : '',
|
text: this.showDeleteKey ? this.deleteText : '',
|
||||||
type: this.showDeleteKey ? 'delete' : '',
|
type: this.showDeleteKey ? 'delete' : '',
|
||||||
|
color: 'gray',
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
case 'custom':
|
case 'custom':
|
||||||
keys.push(
|
keys.push(
|
||||||
{ text: 0, theme: ['middle'] },
|
{ text: 0, wider: true },
|
||||||
{ text: this.extraKey, type: 'extra' }
|
{ text: this.extraKey, type: 'extra' }
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
@ -147,7 +144,7 @@ export default createComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class={[bem('title'), BORDER_TOP]}>
|
<div class={bem('title')}>
|
||||||
{titleLeft && <span class={bem('title-left')}>{titleLeft}</span>}
|
{titleLeft && <span class={bem('title-left')}>{titleLeft}</span>}
|
||||||
{title && <span>{title}</span>}
|
{title && <span>{title}</span>}
|
||||||
{showClose && (
|
{showClose && (
|
||||||
@ -170,7 +167,8 @@ export default createComponent({
|
|||||||
key={key.text}
|
key={key.text}
|
||||||
text={key.text}
|
text={key.text}
|
||||||
type={key.type}
|
type={key.type}
|
||||||
theme={key.theme}
|
wider={key.wider}
|
||||||
|
color={key.color}
|
||||||
onPress={this.onPress}
|
onPress={this.onPress}
|
||||||
>
|
>
|
||||||
{key.type === 'delete' && this.slots('delete')}
|
{key.type === 'delete' && this.slots('delete')}
|
||||||
@ -185,18 +183,19 @@ export default createComponent({
|
|||||||
<div class={bem('sidebar')}>
|
<div class={bem('sidebar')}>
|
||||||
{this.showDeleteKey && (
|
{this.showDeleteKey && (
|
||||||
<Key
|
<Key
|
||||||
|
large
|
||||||
text={this.deleteText}
|
text={this.deleteText}
|
||||||
type="delete"
|
type="delete"
|
||||||
theme={DELETE_KEY_THEME}
|
|
||||||
onPress={this.onPress}
|
onPress={this.onPress}
|
||||||
>
|
>
|
||||||
{this.slots('delete')}
|
{this.slots('delete')}
|
||||||
</Key>
|
</Key>
|
||||||
)}
|
)}
|
||||||
<Key
|
<Key
|
||||||
|
large
|
||||||
text={this.closeButtonText}
|
text={this.closeButtonText}
|
||||||
type="close"
|
type="close"
|
||||||
theme={CLOSE_KEY_THEME}
|
color="blue"
|
||||||
onPress={this.onPress}
|
onPress={this.onPress}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@ -206,19 +205,21 @@ export default createComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const Title = this.genTitle();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<transition name={this.transition ? 'van-slide-up' : ''}>
|
<transition name={this.transition ? 'van-slide-up' : ''}>
|
||||||
<div
|
<div
|
||||||
vShow={this.show}
|
vShow={this.show}
|
||||||
style={{ zIndex: this.zIndex }}
|
style={{ zIndex: this.zIndex }}
|
||||||
class={bem([this.theme, { unfit: !this.safeAreaInsetBottom }])}
|
class={bem({ unfit: !this.safeAreaInsetBottom, 'with-title': Title })}
|
||||||
onTouchstart={stopPropagation}
|
onTouchstart={stopPropagation}
|
||||||
onAnimationend={this.onAnimationEnd}
|
onAnimationend={this.onAnimationEnd}
|
||||||
onWebkitAnimationEnd={this.onAnimationEnd}
|
onWebkitAnimationEnd={this.onAnimationEnd}
|
||||||
>
|
>
|
||||||
{this.genTitle()}
|
{Title}
|
||||||
<div class={bem('body')}>
|
<div class={bem('body')}>
|
||||||
{this.genKeys()}
|
<div class={bem('keys')}>{this.genKeys()}</div>
|
||||||
{this.genSidebar()}
|
{this.genSidebar()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,9 +11,15 @@
|
|||||||
background-color: @number-keyboard-background-color;
|
background-color: @number-keyboard-background-color;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
|
&--with-title {
|
||||||
|
border-radius: 20px 20px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
box-sizing: content-box;
|
||||||
height: @number-keyboard-title-height;
|
height: @number-keyboard-title-height;
|
||||||
|
padding-top: 6px;
|
||||||
color: @number-keyboard-title-color;
|
color: @number-keyboard-title-color;
|
||||||
font-size: @number-keyboard-title-font-size;
|
font-size: @number-keyboard-title-font-size;
|
||||||
line-height: @number-keyboard-title-height;
|
line-height: @number-keyboard-title-height;
|
||||||
@ -26,8 +32,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__body {
|
&__body {
|
||||||
position: relative;
|
display: flex;
|
||||||
box-sizing: border-box;
|
padding: 6px 0 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__keys {
|
||||||
|
display: flex;
|
||||||
|
flex: 3;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__close {
|
&__close {
|
||||||
@ -39,24 +51,14 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: @number-keyboard-key-active-color;
|
opacity: @active-opacity;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__sidebar {
|
&__sidebar {
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 25%;
|
|
||||||
height: @number-keyboard-key-height * 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--custom {
|
|
||||||
.van-number-keyboard__body {
|
|
||||||
padding-right: 25%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--unfit {
|
&--unfit {
|
||||||
@ -65,30 +67,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.van-key {
|
.van-key {
|
||||||
display: inline-block;
|
display: flex;
|
||||||
width: 100% / 3;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
height: @number-keyboard-key-height;
|
height: @number-keyboard-key-height;
|
||||||
font-size: @number-keyboard-key-font-size;
|
font-size: @number-keyboard-key-font-size;
|
||||||
font-style: normal;
|
line-height: 1.5;
|
||||||
line-height: @number-keyboard-key-height;
|
background-color: @white;
|
||||||
text-align: center;
|
border-radius: @border-radius-lg;
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&::after {
|
&--large {
|
||||||
border-width: @border-width-base @border-width-base 0 0;
|
height: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
&--middle {
|
|
||||||
width: 200% / 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--big {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--blue,
|
&--blue,
|
||||||
@ -96,23 +86,6 @@
|
|||||||
font-size: @number-keyboard-delete-font-size;
|
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 {
|
&--gray {
|
||||||
background-color: @number-keyboard-key-background;
|
background-color: @number-keyboard-key-background;
|
||||||
}
|
}
|
||||||
@ -120,4 +93,24 @@
|
|||||||
&--active {
|
&--active {
|
||||||
background-color: @number-keyboard-key-active-color;
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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">
|
<div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
|
||||||
弹出默认键盘
|
弹出默认键盘
|
||||||
</span></button>
|
</span></button>
|
||||||
<div class="van-number-keyboard van-number-keyboard--default" name="van-slide-up">
|
<div class="van-number-keyboard van-number-keyboard--with-title" 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__title"><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__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>
|
</div>
|
||||||
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
|
<div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
|
||||||
弹出自定义键盘
|
弹出自定义键盘
|
||||||
</span></button>
|
</span></button>
|
||||||
<div class="van-number-keyboard van-number-keyboard--custom" style="display: none;" name="van-slide-up">
|
<div class="van-number-keyboard" 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__body">
|
||||||
<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__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>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
<div class="van-cell-group van-hairline--top-bottom">
|
||||||
<div class="van-cell__value van-cell__value--alone van-field__value">
|
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
|
||||||
<div class="van-field__body"><input type="text" readonly="readonly" placeholder="点此输入" class="van-field__control"></div>
|
<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>
|
</div>
|
||||||
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
|
<div class="van-number-keyboard" 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__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>
|
</div>
|
||||||
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
|
<div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
|
||||||
弹出身份证号码键盘
|
弹出身份证号码键盘
|
||||||
</span></button>
|
</span></button>
|
||||||
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
|
<div class="van-number-keyboard van-number-keyboard--with-title" 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__title"><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__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>
|
</div>
|
||||||
<div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">
|
<div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">
|
||||||
弹出自定义标题键盘
|
弹出自定义标题键盘
|
||||||
</span></button>
|
</span></button>
|
||||||
<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
|
<div class="van-number-keyboard van-number-keyboard--with-title" 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__title"><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__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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,51 +1,363 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`extra-key slot 1`] = `
|
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" 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__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>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`focus on key 1`] = `
|
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" 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__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>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`focus on key 2`] = `
|
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" 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__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>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`move and blur key 1`] = `
|
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" 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__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>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`move and blur key 2`] = `
|
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" 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__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>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`move and blur key 3`] = `
|
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" 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__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>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`render title 1`] = `
|
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 van-number-keyboard--with-title" 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__title"><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__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>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`title-left slot 1`] = `
|
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 van-number-keyboard--with-title" 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__title"><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__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>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -16,8 +16,47 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</ul>
|
</ul>
|
||||||
<div class="van-password-input__info">密码为 6 位数字</div>
|
<div class="van-password-input__info">密码为 6 位数字</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-number-keyboard van-number-keyboard--default" name="van-slide-up">
|
<div class="van-number-keyboard" 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__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>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@ -475,11 +475,11 @@
|
|||||||
@notify-warning-background-color: @orange;
|
@notify-warning-background-color: @orange;
|
||||||
|
|
||||||
// NumberKeyboard
|
// NumberKeyboard
|
||||||
@number-keyboard-background-color: @white;
|
@number-keyboard-background-color: @background-color;
|
||||||
@number-keyboard-key-height: 54px;
|
@number-keyboard-key-height: 56px;
|
||||||
@number-keyboard-key-background: @gray-3;
|
@number-keyboard-key-background: @gray-2;
|
||||||
@number-keyboard-key-font-size: 24px;
|
@number-keyboard-key-font-size: 28px;
|
||||||
@number-keyboard-key-active-color: @active-color;
|
@number-keyboard-key-active-color: @gray-3;
|
||||||
@number-keyboard-delete-font-size: @font-size-lg;
|
@number-keyboard-delete-font-size: @font-size-lg;
|
||||||
@number-keyboard-title-color: @gray-7;
|
@number-keyboard-title-color: @gray-7;
|
||||||
@number-keyboard-title-height: 30px;
|
@number-keyboard-title-height: 30px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user