mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] NumberKeyboard: improve accessibility
This commit is contained in:
陈嘉涵
parent
2c275fd98b
commit
1821889f01
@ -13,6 +13,7 @@
|
||||
- Switch
|
||||
- NoticeBar
|
||||
- GoodsAction
|
||||
- NumberKeyboard
|
||||
|
||||
##### ImagePreview
|
||||
|
||||
|
||||
@ -34,8 +34,8 @@ exports[`create a AddressEdit 1`] = `
|
||||
<div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color:#1989fa;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
|
||||
<div class="van-picker__columns" style="height:220px;">
|
||||
@ -104,8 +104,8 @@ exports[`create a AddressEdit with props 1`] = `
|
||||
<div name="van-popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height:220px;">
|
||||
|
||||
@ -5,8 +5,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -82,8 +82,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -164,9 +164,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div class="van-ellipsis van-picker__title">标题</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
exports[`change option 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -35,8 +35,8 @@ exports[`change option 1`] = `
|
||||
exports[`change option 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -67,8 +67,8 @@ exports[`change option 2`] = `
|
||||
exports[`change option 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -99,8 +99,8 @@ exports[`change option 3`] = `
|
||||
exports[`reset method 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -130,8 +130,8 @@ exports[`reset method 1`] = `
|
||||
exports[`reset method 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -162,8 +162,8 @@ exports[`reset method 2`] = `
|
||||
exports[`watch areaList & code 1`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -194,8 +194,8 @@ exports[`watch areaList & code 1`] = `
|
||||
exports[`watch areaList & code 2`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -226,8 +226,8 @@ exports[`watch areaList & code 2`] = `
|
||||
exports[`watch areaList & code 3`] = `
|
||||
<div class="van-picker van-area">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
|
||||
@ -5,8 +5,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -167,8 +167,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -247,8 +247,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -292,8 +292,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
@ -384,8 +384,8 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-picker van-datetime-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { use } from '../utils';
|
||||
import { preventDefault } from '../utils/event';
|
||||
|
||||
const [sfc, bem] = use('key');
|
||||
|
||||
@ -26,12 +25,14 @@ export default sfc({
|
||||
methods: {
|
||||
onFocus() {
|
||||
this.active = true;
|
||||
this.$emit('press', this.text);
|
||||
},
|
||||
|
||||
onBlur(event) {
|
||||
preventDefault(event, true);
|
||||
this.active = false;
|
||||
},
|
||||
|
||||
onClick() {
|
||||
this.$emit('press', this.text);
|
||||
}
|
||||
},
|
||||
|
||||
@ -39,7 +40,10 @@ export default sfc({
|
||||
const { onBlur } = this;
|
||||
return (
|
||||
<i
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class={['van-hairline', this.className]}
|
||||
onClick={this.onClick}
|
||||
onTouchstart={this.onFocus}
|
||||
onTouchmove={onBlur}
|
||||
onTouchend={onBlur}
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
:show="keyboard === 'default'"
|
||||
:close-button-text="$t('close')"
|
||||
extra-key="."
|
||||
safe-area-inset-bottom
|
||||
@blur="keyboard = ''"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
@ -31,6 +32,7 @@
|
||||
:close-button-text="$t('close')"
|
||||
theme="custom"
|
||||
extra-key="."
|
||||
safe-area-inset-bottom
|
||||
@blur="keyboard = ''"
|
||||
@input="onInput"
|
||||
@delete="onDelete"
|
||||
|
||||
@ -100,7 +100,10 @@ export default sfc({
|
||||
|
||||
if (action !== this.handlerStatus && this.hideOnClickOutside) {
|
||||
this.handlerStatus = action;
|
||||
document.body[(action ? 'add' : 'remove') + 'EventListener']('touchstart', this.onBlur);
|
||||
document.body[(action ? 'add' : 'remove') + 'EventListener'](
|
||||
'touchstart',
|
||||
this.onBlur
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
@ -139,6 +142,18 @@ export default sfc({
|
||||
const showTitleClose = closeButtonText && theme === 'default';
|
||||
const showTitle = title || showTitleClose || titleLeftSlot;
|
||||
|
||||
const Title = showTitle && (
|
||||
<div class={[bem('title'), 'van-hairline--top']}>
|
||||
{titleLeftSlot && <span class={bem('title-left')}>{titleLeftSlot}</span>}
|
||||
{title && <span>{title}</span>}
|
||||
{showTitleClose && (
|
||||
<span role="button" tabindex="0" class={bem('close')} onClick={this.onClose}>
|
||||
{closeButtonText}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<transition name={this.transition ? 'van-slide-up' : ''}>
|
||||
<div
|
||||
@ -149,21 +164,7 @@ export default sfc({
|
||||
onAnimationend={this.onAnimationEnd}
|
||||
onWebkitAnimationEnd={this.onAnimationEnd}
|
||||
>
|
||||
{showTitle && (
|
||||
<div class={[bem('title'), 'van-hairline--top']}>
|
||||
{titleLeftSlot && (
|
||||
<span class={bem('title-left')}>
|
||||
{titleLeftSlot}
|
||||
</span>
|
||||
)}
|
||||
{title && <span>{title}</span>}
|
||||
{showTitleClose && (
|
||||
<span class={bem('close')} onClick={this.onClose}>
|
||||
{closeButtonText}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{Title}
|
||||
<div class={bem('body')}>
|
||||
{this.keys.map(key => (
|
||||
<Key key={key.text} text={key.text} type={key.type} onPress={onPress} />
|
||||
|
||||
@ -99,6 +99,10 @@
|
||||
&::after {
|
||||
border-color: @number-keyboard-button-background-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: darken(@number-keyboard-button-background-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&--gray {
|
||||
|
||||
@ -5,17 +5,17 @@ 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" style="z-index: 100;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__close">完成</span></div>
|
||||
<div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray">.</i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
|
||||
<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100;" 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">.</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>
|
||||
</div>
|
||||
<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--custom" style="z-index: 100; display: none;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--middle">0</i><i class="van-hairline van-key">.</i></div>
|
||||
<div class="van-number-keyboard__sidebar"><i class="van-hairline van-key van-key--delete van-key--big van-key--gray">删除</i><i class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
|
||||
<div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; 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">.</i></div>
|
||||
<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">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big">完成</i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,6 +3,6 @@
|
||||
exports[`title-left slot 1`] = `
|
||||
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" 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 class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></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"></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>
|
||||
`;
|
||||
|
||||
@ -1,13 +1,6 @@
|
||||
import NumberKeyboard from '..';
|
||||
import { mount } from '../../../test/utils';
|
||||
|
||||
function mockTouch(wrapper, event, keyIndex) {
|
||||
const key = wrapper.element.querySelectorAll('.van-key')[keyIndex];
|
||||
const touchStart = document.createEvent('CustomEvent');
|
||||
touchStart.initCustomEvent(event, true, true, {});
|
||||
key.dispatchEvent(touchStart);
|
||||
}
|
||||
|
||||
test('click number key', () => {
|
||||
const wrapper = mount(NumberKeyboard, {
|
||||
propsData: {
|
||||
@ -16,16 +9,15 @@ test('click number key', () => {
|
||||
}
|
||||
});
|
||||
|
||||
mockTouch(wrapper, 'touchstart', 10);
|
||||
mockTouch(wrapper, 'touchstart', 0);
|
||||
mockTouch(wrapper, 'touchend', 0);
|
||||
wrapper.destroy();
|
||||
wrapper.findAll('.van-key').at(0).trigger('click');
|
||||
expect(wrapper.emitted('input')[0][0]).toEqual(1);
|
||||
|
||||
wrapper.destroy();
|
||||
});
|
||||
|
||||
it('click delete key', () => {
|
||||
const wrapper = mount(NumberKeyboard);
|
||||
mockTouch(wrapper, 'touchstart', 11);
|
||||
wrapper.findAll('.van-key').at(11).trigger('click');
|
||||
expect(wrapper.emitted('delete')).toBeTruthy();
|
||||
});
|
||||
|
||||
@ -37,7 +29,7 @@ test('click close button', () => {
|
||||
}
|
||||
});
|
||||
|
||||
mockTouch(wrapper, 'touchstart', 12);
|
||||
wrapper.findAll('.van-key').at(12).trigger('click');
|
||||
expect(wrapper.emitted('close')).toBeTruthy();
|
||||
});
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
|
||||
<div class="van-password-input__info">密码为 6 位数字</div>
|
||||
</div>
|
||||
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100;" name="van-slide-up">
|
||||
<div class="van-number-keyboard__body"><i class="van-hairline van-key">1</i><i class="van-hairline van-key">2</i><i class="van-hairline van-key">3</i><i class="van-hairline van-key">4</i><i class="van-hairline van-key">5</i><i class="van-hairline van-key">6</i><i class="van-hairline van-key">7</i><i class="van-hairline van-key">8</i><i class="van-hairline van-key">9</i><i class="van-hairline van-key van-key--gray"></i><i class="van-hairline van-key">0</i><i class="van-hairline van-key van-key--gray van-key--delete">删除</i></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"></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>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -159,14 +159,14 @@ export default sfc({
|
||||
const Toolbar = this.showToolbar && (
|
||||
<div class={['van-hairline--top-bottom', bem('toolbar')]}>
|
||||
{this.slots() || [
|
||||
<div class={bem('cancel')} onClick={this.onCancel}>
|
||||
<div role="button" tabindex="0" class={bem('cancel')} onClick={this.onCancel}>
|
||||
{this.cancelButtonText || t('cancel')}
|
||||
</div>,
|
||||
this.slots('title') ||
|
||||
(this.title && (
|
||||
<div class={['van-ellipsis', bem('title')]}>{this.title}</div>
|
||||
)),
|
||||
<div class={bem('confirm')} onClick={this.onConfirm}>
|
||||
<div role="button" tabindex="0" class={bem('confirm')} onClick={this.onConfirm}>
|
||||
{this.confirmButtonText || t('confirm')}
|
||||
</div>
|
||||
]}
|
||||
|
||||
@ -41,9 +41,9 @@ exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
|
||||
<div class="van-ellipsis van-picker__title">标题</div>
|
||||
<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
|
||||
@ -31,7 +31,7 @@ exports[`column watch default index 2`] = `
|
||||
exports[`render title slot 1`] = `
|
||||
<div class="van-picker">
|
||||
<div class="van-hairline--top-bottom van-picker__toolbar">
|
||||
<div class="van-picker__cancel">取消</div>Custom title<div class="van-picker__confirm">确认</div>
|
||||
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>Custom title<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
|
||||
</div>
|
||||
<!---->
|
||||
<div class="van-picker__columns" style="height: 220px;">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user