alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[improvement] Rate: update icon (#2093)

Browse Source
This commit is contained in:
neverland
2018-11-15 19:34:24 +08:00
committed by GitHub
parent c02ed75e18
commit b8a74a1eef
4 changed files with 57 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/rate/index.less
View File

@@ -4,8 +4,8 @@
user-select: none;
&__item {
width: 1em;
padding: 0 2px;
display: inline-block;
box-sizing: content-box;
}
}

21
packages/rate/index.vue
View File

@@ -3,17 +3,16 @@
:class="b()"
@touchmove="onTouchMove"
>
<svg
v-for="(isFull, index) in list"
:fill="disabled ? disabledColor : isFull ? color : voidColor"
viewBox="0 0 32 32"
:style="style"
<icon
v-for="(full, index) in list"
:key="index"
:class="b('item')"
:size="size + 'px'"
:data-index="index"
:name="full ? 'star' : 'star-o'"
:color="disabled ? disabledColor : full ? color : voidColor"
@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'" />
</svg>
/>
</div>
</template>
@@ -53,12 +52,6 @@ export default create({
},
computed: {
style() {
return {
width: this.size + 'px'
};
},
list() {
return Array.apply(null, { length: this.count }).map((value, index) => index < this.value);
}

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

@@ -4,62 +4,62 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-rate">
<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" 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" 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" 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" 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>
<i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
<!---->
</i>
<i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
<!---->
</i>
<i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#ffd21e;font-size:20px;">
<!---->
</i>
<i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
<!---->
</i>
<i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
<!---->
</i>
</div>
</div>
<div>
<div class="van-rate">
<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" 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" 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" 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" 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" 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>
<i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
<!---->
</i>
<i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
<!---->
</i>
<i data-index="2" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
<!---->
</i>
<i data-index="3" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">
<!---->
</i>
<i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
<!---->
</i>
<i data-index="5" class="van-icon van-icon-star-o van-rate__item" style="color:#ceefe8;font-size:25px;">
<!---->
</i>
</div>
</div>
<div>
<div class="van-rate">
<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" 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" 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" 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" 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>
<i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!---->
</i>
<i data-index="1" class="van-icon van-icon-star van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!---->
</i>
<i data-index="2" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!---->
</i>
<i data-index="3" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!---->
</i>
<i data-index="4" class="van-icon van-icon-star-o van-rate__item" style="color:#bdbdbd;font-size:20px;">
<!---->
</i>
</div>
</div>
</div>

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

@@ -22,7 +22,7 @@ test('touchmove', () => {
const wrapper = mount(Rate);
triggerDrag(wrapper, 100, 0);
const icons = wrapper.findAll('svg');
const icons = wrapper.findAll('.van-icon');
document.elementFromPoint = function(x, y) {
const index = Math.round(x / 20);
if (index < icons.length) {