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] Rate: support touch move select (#1951)

Browse Source
This commit is contained in:
neverland 2018-10-17 16:36:13 +08:00 committed by GitHub
parent fa35ab18ff
commit f7271b4aec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/rate/index.vue
View File

@ -1,11 +1,12 @@
<template>
<div :class="b()">
<div :class="b()" @touchmove="onTouchMove">
<svg
v-for="(isFull, index) in list"
:fill="disabled ? disabledColor : isFull ? color : voidColor"
viewBox="0 0 32 32"
:style="style"
:class="b('item')"
:data-index="index"
@click="onSelect(index)"
>
<path :d="isFull ? 'M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z' : 'M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z'" />
@ -66,6 +67,24 @@ export default create({
this.$emit('input', index + 1);
this.$emit('change', index + 1);
}
},
onTouchMove(event) {
if (!document.elementFromPoint) {
return;
}
event.preventDefault();
const { clientX, clientY } = event.touches[0];
const target = document.elementFromPoint(clientX, clientY);
if (target && target.dataset) {
const { index } = target.dataset;
/* istanbul ignore else */
if (index) {
this.onSelect(+index);
}
}
}
}
});

32
packages/rate/test/__snapshots__/demo.spec.js.snap
View File

@ -4,60 +4,60 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-rate">
<svg fill="#ffd21e" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
<svg fill="#ffd21e" viewBox="0 0 32 32" data-index="0" class="van-rate__item" style="width:20px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</svg>
<svg fill="#ffd21e" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
<svg fill="#ffd21e" viewBox="0 0 32 32" data-index="1" class="van-rate__item" style="width:20px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</svg>
<svg fill="#ffd21e" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
<svg fill="#ffd21e" viewBox="0 0 32 32" data-index="2" class="van-rate__item" style="width:20px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</svg>
<svg fill="#c7c7c7" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
<svg fill="#c7c7c7" viewBox="0 0 32 32" data-index="3" class="van-rate__item" style="width:20px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
</svg>
<svg fill="#c7c7c7" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
<svg fill="#c7c7c7" viewBox="0 0 32 32" data-index="4" class="van-rate__item" style="width:20px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
</svg>
</div>
</div>
<div>
<div class="van-rate">
<svg fill="#2ba" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
<svg fill="#2ba" viewBox="0 0 32 32" data-index="0" class="van-rate__item" style="width:25px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</svg>
<svg fill="#2ba" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
<svg fill="#2ba" viewBox="0 0 32 32" data-index="1" class="van-rate__item" style="width:25px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</svg>
<svg fill="#2ba" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
<svg fill="#2ba" viewBox="0 0 32 32" data-index="2" class="van-rate__item" style="width:25px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</svg>
<svg fill="#2ba" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
<svg fill="#2ba" viewBox="0 0 32 32" data-index="3" class="van-rate__item" style="width:25px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</svg>
<svg fill="#ceefe8" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
<svg fill="#ceefe8" viewBox="0 0 32 32" data-index="4" class="van-rate__item" style="width:25px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
</svg>
<svg fill="#ceefe8" viewBox="0 0 32 32" class="van-rate__item" style="width:25px;">
<svg fill="#ceefe8" viewBox="0 0 32 32" data-index="5" class="van-rate__item" style="width:25px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
</svg>
</div>
</div>
<div>
<div class="van-rate">
<svg fill="#bdbdbd" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
<svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="0" class="van-rate__item" style="width:20px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</svg>
<svg fill="#bdbdbd" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
<svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="1" class="van-rate__item" style="width:20px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</svg>
<svg fill="#bdbdbd" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
<svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="2" class="van-rate__item" style="width:20px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
</svg>
<svg fill="#bdbdbd" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
<svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="3" class="van-rate__item" style="width:20px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
</svg>
<svg fill="#bdbdbd" viewBox="0 0 32 32" class="van-rate__item" style="width:20px;">
<svg fill="#bdbdbd" viewBox="0 0 32 32" data-index="4" class="van-rate__item" style="width:20px;">
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
</svg>
</div>

17
packages/rate/test/index.spec.js
View File

@ -1,5 +1,5 @@
import Rate from '../';
import { mount } from '../../../test/utils';
import { mount, triggerDrag } from '../../../test/utils';
test('change event', () => {
const wrapper = mount(Rate, {
@ -17,3 +17,18 @@ test('change event', () => {
expect(wrapper.emitted('input')[0][0]).toEqual(4);
expect(wrapper.emitted('change')[0][0]).toEqual(4);
});
test('touchmove', () => {
const wrapper = mount(Rate);
triggerDrag(wrapper, 100, 0);
const icons = wrapper.findAll('svg');
document.elementFromPoint = function(x, y) {
const index = Math.round(x / 20);
if (index < icons.length) {
return icons.at(index).element;
}
};
triggerDrag(wrapper, 100, 0);
expect(wrapper.emitted('change')).toEqual([[2], [3], [4]]);
});