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

[improvement] NumberKeyboard: improve click experience (#4116)

Browse Source
This commit is contained in:
neverland 2019-08-14 11:42:41 +08:00 committed by GitHub
parent 2843352adb
commit 468fec2d86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,12 @@
import { createNamespace } from '../utils';
import { TouchMixin } from '../mixins/touch';
import { BORDER } from '../utils/constant';
const [createComponent, bem] = createNamespace('key');
export default createComponent({
mixins: [TouchMixin],
props: {
type: String,
text: [Number, String],
@ -36,31 +39,37 @@ export default createComponent({
},
methods: {
onFocus() {
onTouchStart(event) {
this.touchStart(event);
this.active = true;
},
onBlur() {
this.active = false;
onTouchMove(event) {
this.touchMove(event);
if (this.direction) {
this.active = false;
}
},
onClick() {
this.$emit('press', this.text, this.type);
onTouchEnd() {
if (this.active) {
this.active = false;
this.$emit('press', this.text, this.type);
}
}
},
render() {
const { onBlur } = this;
return (
<i
role="button"
tabindex="0"
class={[BORDER, this.className]}
onClick={this.onClick}
onTouchstart={this.onFocus}
onTouchmove={onBlur}
onTouchend={onBlur}
onTouchcancel={onBlur}
onTouchstart={this.onTouchStart}
onTouchmove={this.onTouchMove}
onTouchend={this.onTouchEnd}
onTouchcancel={this.onTouchEnd}
>
{this.slots('default') || this.text}
</i>

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

@ -12,6 +12,24 @@ exports[`focus on key 2`] = `
</div>
`;
exports[`move and blur key 1`] = `
<div class="van-number-keyboard van-number-keyboard--default" 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 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"></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>
`;
exports[`move and blur key 2`] = `
<div class="van-number-keyboard van-number-keyboard--default" 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 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"></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>
`;
exports[`move and blur key 3`] = `
<div class="van-number-keyboard van-number-keyboard--default" 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--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>
`;
exports[`render title 1`] = `
<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; 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>

50
src/number-keyboard/test/index.spec.js
View File

@ -1,6 +1,11 @@
import NumberKeyboard from '..';
import { mount, trigger } from '../../../test/utils';
function clickKey(key) {
trigger(key, 'touchstart');
trigger(key, 'touchend');
}
test('click number key', () => {
const wrapper = mount(NumberKeyboard, {
propsData: {
@ -9,10 +14,7 @@ test('click number key', () => {
}
});
wrapper
.findAll('.van-key')
.at(0)
.trigger('click');
clickKey(wrapper.findAll('.van-key').at(0));
expect(wrapper.emitted('input')[0][0]).toEqual(1);
wrapper.destroy();
@ -20,19 +22,14 @@ test('click number key', () => {
it('click delete key', () => {
const wrapper = mount(NumberKeyboard);
wrapper
.findAll('.van-key')
.at(11)
.trigger('click');
clickKey(wrapper.findAll('.van-key').at(11));
expect(wrapper.emitted('delete')).toBeTruthy();
});
it('click empty key', () => {
const wrapper = mount(NumberKeyboard);
wrapper
.findAll('.van-key')
.at(9)
.trigger('click');
clickKey(wrapper.findAll('.van-key').at(9));
expect(wrapper.emitted('input')).toBeFalsy();
});
@ -44,10 +41,7 @@ test('click close button', () => {
}
});
wrapper
.findAll('.van-key')
.at(12)
.trigger('click');
clickKey(wrapper.findAll('.van-key').at(12));
expect(wrapper.emitted('close')).toBeTruthy();
});
@ -127,6 +121,20 @@ test('focus on key', () => {
expect(wrapper).toMatchSnapshot();
});
test('move and blur key', () => {
const wrapper = mount(NumberKeyboard);
const key = wrapper.find('.van-key');
trigger(key, 'touchstart');
expect(wrapper).toMatchSnapshot();
trigger(key, 'touchmove', 0, 0);
expect(wrapper).toMatchSnapshot();
trigger(key, 'touchmove', 100, 0);
expect(wrapper).toMatchSnapshot();
trigger(key, 'touchend');
expect(wrapper.emitted('input')).toBeFalsy();
});
test('bind value', () => {
const wrapper = mount(NumberKeyboard, {
propsData: {
@ -140,12 +148,12 @@ test('bind value', () => {
});
const keys = wrapper.findAll('.van-key');
keys.at(0).trigger('click');
keys.at(1).trigger('click');
clickKey(keys.at(0));
clickKey(keys.at(1));
expect(wrapper.vm.value).toEqual('12');
keys.at(11).trigger('click');
clickKey(keys.at(11));
expect(wrapper.vm.value).toEqual('1');
});
@ -165,8 +173,8 @@ test('maxlength', () => {
});
const keys = wrapper.findAll('.van-key');
keys.at(0).trigger('click');
keys.at(1).trigger('click');
clickKey(keys.at(0));
clickKey(keys.at(1));
expect(wrapper.vm.value).toEqual('1');
expect(onInput).toHaveBeenCalledTimes(1);