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

fix(Rate): select half star correctly when clicked (#8580)

Browse Source 
* fix(Rate): select half star correctly when clicked

* fix: failed to click

* chore: upd
This commit is contained in:
neverland 2021-04-20 19:31:04 +08:00 committed by GitHub
parent d86a2dc568
commit 032a512b22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 93 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/form/test/__snapshots__/demo.spec.ts.snap
View File

@ -308,9 +308,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -320,9 +318,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -332,9 +328,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -344,9 +338,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -356,9 +348,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>

2
src/rate/README.md
View File

@ -56,7 +56,7 @@ export default {
### Half Star
```html
<van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
<van-rate v-model="value" allow-half />
```
```js

2
src/rate/README.zh-CN.md
View File

@ -56,7 +56,7 @@ export default {
### 半星
```html
<van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
<van-rate v-model="value" allow-half />
```
```js

70
src/rate/Rate.tsx
View File

@ -16,8 +16,8 @@ const [name, bem] = createNamespace('rate');
type RateStatus = 'full' | 'half' | 'void';
type RateListItem = {
status: RateStatus;
value: number;
status: RateStatus;
};
function getRateStatus(
@ -80,8 +80,6 @@ export default defineComponent({
emits: ['change', 'update:modelValue'],
setup(props, { emit }) {
let ranges: Array<{ left: number; score: number }>;
const touch = useTouch();
const [itemRefs, setItemRefs] = useRefs();
@ -101,29 +99,9 @@ export default defineComponent({
)
);
const select = (index: number) => {
if (!props.disabled && !props.readonly && index !== props.modelValue) {
emit('update:modelValue', index);
emit('change', index);
}
};
const getScoreByPosition = (x: number) => {
for (let i = ranges.length - 1; i > 0; i--) {
if (x > ranges[i].left) {
return ranges[i].score;
}
}
return props.allowHalf ? 0.5 : 1;
};
const onTouchStart = (event: TouchEvent) => {
if (untouchable()) {
return;
}
touch.start(event);
let ranges: Array<{ left: number; score: number }>;
const updateRanges = () => {
const rects = itemRefs.value.map((item) => item.getBoundingClientRect());
ranges = [];
@ -139,6 +117,31 @@ export default defineComponent({
});
};
const getScoreByPosition = (x: number) => {
for (let i = ranges.length - 1; i > 0; i--) {
if (x > ranges[i].left) {
return ranges[i].score;
}
}
return props.allowHalf ? 0.5 : 1;
};
const select = (index: number) => {
if (!props.disabled && !props.readonly && index !== props.modelValue) {
emit('update:modelValue', index);
emit('change', index);
}
};
const onTouchStart = (event: TouchEvent) => {
if (untouchable()) {
return;
}
touch.start(event);
updateRanges();
};
const onTouchMove = (event: TouchEvent) => {
if (untouchable()) {
return;
@ -170,6 +173,7 @@ export default defineComponent({
const score = index + 1;
const isFull = item.status === 'full';
const isVoid = item.status === 'void';
const renderHalf = allowHalf && item.value > 0 && item.value < 1;
let style;
if (gutter && score !== +count) {
@ -178,6 +182,11 @@ export default defineComponent({
};
}
const onClickItem = (event: MouseEvent) => {
updateRanges();
select(allowHalf ? getScoreByPosition(event.clientX) : score);
};
return (
<div
key={index}
@ -189,6 +198,7 @@ export default defineComponent({
aria-setsize={+count}
aria-posinset={score}
aria-checked={!isVoid}
onClick={onClickItem}
>
<Icon
size={size}
@ -196,12 +206,8 @@ export default defineComponent({
class={bem('icon', { disabled, full: isFull })}
color={disabled ? disabledColor : isFull ? color : voidColor}
classPrefix={iconPrefix}
data-score={score}
onClick={() => {
select(score);
}}
/>
{allowHalf && (
{renderHalf && (
<Icon
size={size}
style={{ width: item.value + 'em' }}
@ -209,10 +215,6 @@ export default defineComponent({
class={bem('icon', ['half', { disabled, full: !isVoid }])}
color={disabled ? disabledColor : isVoid ? voidColor : color}
classPrefix={iconPrefix}
data-score={score - 0.5}
onClick={() => {
select(score - 0.5);
}}
/>
)}
</div>

8
src/rate/demo/index.vue
View File

@ -18,13 +18,7 @@
</demo-block>
<demo-block :title="t('halfStar')">
<van-rate
v-model="value4"
:size="25"
allow-half
void-icon="star"
void-color="#eee"
/>
<van-rate v-model="value4" allow-half />
</demo-block>
<demo-block :title="t('customCount')">

1
src/rate/index.less
View File

@ -23,7 +23,6 @@
position: absolute;
top: 0;
left: 0;
width: 0.5em;
overflow: hidden;
}

218
src/rate/test/__snapshots__/demo.spec.ts.snap
View File

@ -13,9 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -25,9 +23,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -37,9 +33,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -49,9 +43,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -61,9 +53,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@ -80,9 +70,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -92,9 +80,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -104,9 +90,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-like van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -116,9 +100,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -128,9 +110,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-like-o van-rate__icon">
</i>
</div>
</div>
@ -149,7 +129,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="color: rgb(255, 210, 30); font-size: 25px;"
data-score="1"
>
</i>
</div>
@ -162,7 +141,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="color: rgb(255, 210, 30); font-size: 25px;"
data-score="2"
>
</i>
</div>
@ -175,7 +153,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="color: rgb(255, 210, 30); font-size: 25px;"
data-score="3"
>
</i>
</div>
@ -188,7 +165,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="4"
>
</i>
</div>
@ -201,7 +177,6 @@ exports[`should render demo and match snapshot 1`] = `
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="5"
>
</i>
</div>
@ -219,15 +194,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="font-size: 25px;"
data-score="1"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="font-size: 25px; width: 1em;"
data-score="0.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -237,15 +204,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
style="font-size: 25px;"
data-score="2"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="font-size: 25px; width: 1em;"
data-score="1.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -255,14 +214,10 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="font-size: 25px; width: 0.5em;"
data-score="2.5"
style="width: 0.5em;"
>
</i>
</div>
@ -273,15 +228,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="4"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half"
style="color: rgb(238, 238, 238); font-size: 25px; width: 0em;"
data-score="3.5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -291,15 +238,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon"
style="color: rgb(238, 238, 238); font-size: 25px;"
data-score="5"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half"
style="color: rgb(238, 238, 238); font-size: 25px; width: 0em;"
data-score="4.5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@ -316,9 +255,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -328,9 +265,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -340,9 +275,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -352,9 +285,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -364,9 +295,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -376,9 +305,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="6"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="6"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@ -395,9 +322,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -407,9 +332,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -419,9 +342,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--disabled van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -431,9 +352,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled">
</i>
</div>
<div role="radio"
@ -443,9 +362,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--disabled">
</i>
</div>
</div>
@ -462,9 +379,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -474,9 +389,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -486,9 +399,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -498,9 +409,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -510,9 +419,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@ -529,14 +436,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="width: 1em;"
data-score="0.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -546,14 +446,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="width: 1em;"
data-score="1.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -563,14 +456,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="3"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="width: 1em;"
data-score="2.5"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -580,13 +466,10 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--half van-rate__icon--full"
style="width: 0.3em;"
data-score="3.5"
>
</i>
</div>
@ -597,14 +480,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
</i>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon van-rate__icon--half"
style="width: 0em;"
data-score="4.5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>
@ -621,9 +497,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="1"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -633,9 +507,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="2"
aria-checked="true"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star van-rate__icon van-rate__icon--full">
</i>
</div>
<div role="radio"
@ -645,9 +517,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="3"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -657,9 +527,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -669,9 +537,7 @@ exports[`should render demo and match snapshot 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>

20
src/rate/test/__snapshots__/index.spec.ts.snap
View File

@ -13,9 +13,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="1"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="1"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -26,9 +24,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="2"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="2"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -39,9 +35,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="3"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="3"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -52,9 +46,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="4"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="4"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
<div role="radio"
@ -64,9 +56,7 @@ exports[`should render gutter when using gutter prop 1`] = `
aria-posinset="5"
aria-checked="false"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon"
data-score="5"
>
<i class="van-badge__wrapper van-icon van-icon-star-o van-rate__icon">
</i>
</div>
</div>

17
src/rate/test/index.spec.ts
View File

@ -42,19 +42,6 @@ test('should not emit change and update:modelValue event when rate is not change
expect(wrapper.emitted('update:modelValue')).toBeFalsy();
});
test('should allow half rate when using allow-half prop', () => {
const wrapper = mount(Rate, {
props: {
allowHalf: true,
},
});
const item4 = wrapper.findAll('.van-rate__icon--half')[3];
item4.trigger('click');
expect(wrapper.emitted('change')![0]).toEqual([3.5]);
expect(wrapper.emitted('update:modelValue')![0]).toEqual([3.5]);
});
test('should not emit change or update:modelValue event when rate is disabled', () => {
const wrapper = mount(Rate, {
props: {
@ -137,6 +124,6 @@ test('should get decimal when using allow-half and readonly prop', () => {
},
});
const item4 = wrapper.findAll('.van-rate__icon--half')[3];
expect(item4.style.width).toEqual('0.3em');
const halfIcon = wrapper.find('.van-rate__icon--half');
expect(halfIcon.style.width).toEqual('0.3em');
});