blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 10:20:19 +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> <template>
<div :class="b()"> <div :class="b()" @touchmove="onTouchMove">
<svg <svg
v-for="(isFull, index) in list" v-for="(isFull, index) in list"
:fill="disabled ? disabledColor : isFull ? color : voidColor" :fill="disabled ? disabledColor : isFull ? color : voidColor"
viewBox="0 0 32 32" viewBox="0 0 32 32"
:style="style" :style="style"
:class="b('item')" :class="b('item')"
:data-index="index"
@click="onSelect(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'" /> <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('input', index + 1);
this.$emit('change', 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> <div>
<div class="van-rate"> <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> <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>
<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> <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>
<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> <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>
<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> <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>
<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> <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>
</div> </div>
</div> </div>
<div> <div>
<div class="van-rate"> <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> <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>
<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> <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>
<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> <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>
<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> <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>
<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> <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>
<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> <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>
</div> </div>
</div> </div>
<div> <div>
<div class="van-rate"> <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> <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>
<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> <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>
<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> <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>
<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> <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>
<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> <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>
</div> </div>

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

@ -1,5 +1,5 @@
import Rate from '../'; import Rate from '../';
import { mount } from '../../../test/utils'; import { mount, triggerDrag } from '../../../test/utils';
test('change event', () => { test('change event', () => {
const wrapper = mount(Rate, { const wrapper = mount(Rate, {
@ -17,3 +17,18 @@ test('change event', () => {
expect(wrapper.emitted('input')[0][0]).toEqual(4); expect(wrapper.emitted('input')[0][0]).toEqual(4);
expect(wrapper.emitted('change')[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]]);
});