可自定义设置以下属性：
是否允许再次点击后清除（allowClear），类型：boolean，默认 true
是否允许半选（allowHalf），类型：boolean，默认 false
star 总数（count），类型：number，默认 5
自定义字符（character），类型：'star-outlined' | 'star-filled' | 'heart-outlined' | 'heart-filled' | string | slot ，默认 'star-filled'，预置四种 svg 图标
字符时是字体高度，图标时是图片大小（size），类型：number，单位 px，默认 20
字符选中颜色（color），类型：string，默认 '#fadb14'
字符间距（gap），类型：number，单位 px，默认 8
只读，无法进行交互（disabled），类型：boolean，默认 false
当前数，受控值 1,2,3...（v-model:value），类型：number，默认 0
效果如下图： 在线预览
①创建评分组件Rate.vue：
<script setup lang="ts">
import { ref, watch } from 'vue'
interface Props {
allowClear?: boolean // 是否允许再次点击后清除
allowHalf?: boolean // 是否允许半选
count?: number // star 总数
character?: 'star-outlined' | 'star-filled' | 'heart-outlined' | 'heart-filled' | string // 自定义字符，预置四种 svg 图标 string | slot
size?: number // 字符时是字体高度，图标时是图标大小，单位 px
color?: string // 字符选中颜色
gap?: number // 字符间距，单位 px
disabled?: boolean // 只读，无法进行交互
value?: number // (v-model) 当前数，受控值 1,2,3...
}
const props = withDefaults(defineProps<Props>(), {
allowClear: true,
allowHalf: false,
count: 5,
character: 'star-filled',
size: 20,
color: '#fadb14',
gap: 8,
disabled: false,
value: 0
})
const activeValue = ref(props.value)
const tempValue = ref() // 清除时保存点击value
watch(
() => props.value,
(to) => {
activeValue.value = to
}
)
const emits = defineEmits(['update:value', 'change', 'hoverChange'])
function onClick(value: number) {
tempValue.value = null
if (value !== props.value) {
emits('change', value) // 选择时的回调
emits('update:value', value)
} else {
if (props.allowClear) {
tempValue.value = value
emits('change', 0)
emits('update:value', 0)
} else {
// 不允许清除
emits('change', value) // 选择时的回调
}
}
}
function onFirstEnter(value: number) {
activeValue.value = value
emits('hoverChange', value) // 鼠标经过时数值变化的回调
}
function onSecondEnter(value: number) {
activeValue.value = value
emits('hoverChange', value)
}
function resetTempValue() {
// 重置点击value
tempValue.value = null
}
function onLeave() {
activeValue.value = props.value
}
</script>
<template>
<div
class="m-rate"
:class="{ disabled: disabled }"
:style="`--star-color: ${color}; --star-gap: ${gap}px; --start-size: ${size}px;`"
@mouseleave="onLeave"
>
<div
class="rate-star"
:class="{
'star-half': allowHalf && activeValue >= n - 0.5 && activeValue < n,
'star-full': activeValue >= n,
'temp-gray': !allowHalf && tempValue === n
}"
@click="allowHalf ? () => false : onClick(n)"
v-for="n in count"
:key="n"
>
<div
v-if="allowHalf"
class="star-first"
:class="{ 'temp-gray-first': tempValue === n - 0.5 }"
@click.stop="onClick(n - 0.5)"
@mouseenter="onFirstEnter(n - 0.5)"
@mouseleave="resetTempValue"
>
<svg
v-if="character === 'star-filled'"
class="icon-svg"
focusable="false"
data-icon="star"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
></path>
</svg>
<svg
v-else-if="character === 'star-outlined'"
class="icon-svg"
focusable="false"
data-icon="star"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"
></path>
</svg>
<svg
v-else-if="character === 'heart-filled'"
class="icon-svg"
focusable="false"
data-icon="heart"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path
d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z"
></path>
</svg>
<svg
v-else-if="character === 'heart-outlined'"
class="icon-svg"
focusable="false"
data-icon="heart"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path
d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"
></path>
</svg>
<span
v-else
class="icon-character"
:style="`font-size: ${(size * 2) / 3}px; height: ${size}px; line-height: ${size}px;`"
>
<slot name="character">{
{ character }}</slot>
</span>
</div>
<div
class="star-second"
:class="{ 'temp-gray-second': tempValue === n }"
@click.stop="onClick(n)"
@mouseenter="onSecondEnter(n)"
@mouseleave="resetTempValue"
>
<svg
v-if="character === 'star-filled'"
class="icon-svg"
focusable="false"
data-icon="star"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"
></path>
</svg>
<svg
v-else-if="character === 'star-outlined'"
class="icon-svg"
focusable="false"
data-icon="star"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path
d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"
></path>
</svg>
<svg
v-else-if="character === 'heart-filled'"
class="icon-svg"
focusable="false"
data-icon="heart"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path
d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z"
></path>
</svg>
<svg
v-else-if="character === 'heart-outlined'"
class="icon-svg"
focusable="false"
data-icon="heart"
aria-hidden="true"
viewBox="64 64 896 896"
>
<path
d="M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z"
></path>
</svg>
<span v-else class="icon-character" :style="`font-size: ${0.66 * size}px; height: ${size}px;`">
<slot name="character">{
{ character }}</slot>
</span>
</div>
</div>
</div>
</template>
<style lang="less" scoped>
.m-rate {
display: inline-flex;
gap: var(--star-gap);
.rate-star {
position: relative;
display: inline-block;
cursor: pointer;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.1);
}
.icon-svg {
width: var(--start-size);
.icon-character();
}
.icon-character {
display: inline-flex;
align-items: center;
text-align: center;
vertical-align: middle;
fill: rgba(0, 0, 0, 0.06);
color: rgba(0, 0, 0, 0.06);
transition: all 0.3s;
}
.star-first {
position: absolute;
top: 0;
width: 50%;
height: 100%;
opacity: 0;
overflow: hidden;
transition: all 0.3s;
&:hover {
opacity: 1;
.icon-svg,
.icon-character {
fill: var(--star-color);
color: var(--star-color);
}
}
}
.star-second {
display: inline-block;
&:hover {
.icon-svg,
.icon-character {
fill: var(--star-color);
color: var(--star-color);
}
}
}
.temp-gray-first {
&:hover {
opacity: 0;
.icon-svg,
.icon-character {
fill: rgba(0, 0, 0, 0.06);
color: rgba(0, 0, 0, 0.06);
}
}
}
.temp-gray-second {
&:hover {
.icon-svg,
.icon-character {
fill: rgba(0, 0, 0, 0.06);
color: rgba(0, 0, 0, 0.06);
}
}
}
}
.star-half {
.star-first {
opacity: 1;
.icon-svg,
.icon-character {
fill: var(--star-color);
color: var(--star-color);
}
}
}
.star-full {
.star-second {
.icon-svg,
.icon-character {
fill: var(--star-color);
color: var(--star-color);
}
}
}
}
.disabled {
pointer-events: none;
}
</style>
②在要使用的页面引入：
<script setup lang="ts">
import Rate from './Rate.vue'
import { ref, watchEffect, reactive } from 'vue'
const value = ref(2.99)
watchEffect(() => {
console.log('value', value.value)
})
function onChange(value: number) {
console.log('change value', value)
}
function onHoverChange(value: number) {
console.log('hover value', value)
}
const characterOptions = [
{
label: 'star-outlined',
value: 'star-outlined'
},
{
label: 'star-filled',
value: 'star-filled'
},
{
label: 'heart-outlined',
value: 'heart-outlined'
},
{
label: 'heart-filled',
value: 'heart-filled'
},
{
label: 'custom-character',
value: 'custom-character'
}
]
const state = reactive({
allowClear: true,
allowHalf: true,
count: 5,
character: 'star-filled',
customCharacter: 'S',
size: 36,
color: '#fadb14',
gap: 8,
disabled: false,
value: 3
})
const score = ref(2.5)
watchEffect(() => {
console.log('score', score.value)
})
</script>
<template>
<div>
<h1>{
{ $route.name }} {
{ $route.meta.title }}</h1>
<h2 class="mt30 mb10">基本使用</h2>
<Rate v-model:value="value" />
<h2 class="mt30 mb10">禁用</h2>
<Rate v-model:value="value" disabled />
<h2 class="mt30 mb10">空心星型</h2>
<Rate character="star-outlined" :size="30" v-model:value="value" />
<h2 class="mt30 mb10">实心心型</h2>
<Rate character="heart-filled" :size="30" v-model:value="value" />
<h2 class="mt30 mb10">空心心型</h2>
<Rate character="heart-outlined" :size="30" v-model:value="value" />
<h2 class="mt30 mb10">支持选中半星</h2>
<Rate v-model:value="value" :size="30" allow-half />
<h2 class="mt30 mb10">使用中文文字: 好</h2>
<Rate character="好" :size="36" v-model:value="value" @change="onChange" @hover-change="onHoverChange" />
<h2 class="mt30 mb10">使用英文字母: A</h2>
<Rate character="A" :size="48" v-model:value="value" @change="onChange" @hover-change="onHoverChange" />
<h2 class="mt30 mb10">自定义选中颜色</h2>
<Rate color="#1677FF" :size="30" v-model:value="value" />
<h2 class="mt30 mb10">自定义间距</h2>
<Rate :size="30" :gap="16" v-model:value="value" />
<h2 class="mt30 mb10">自定义 star 总数</h2>
<Rate :size="30" :count="10" v-model:value="value" />
<h2 class="mt30 mb10">评分配置器</h2>
<Row :gutter="[24, 12]">
<Col :span="6">
<Space gap="small" vertical> allowClear:<Switch v-model="state.allowClear" /> </Space>
</Col>
<Col :span="6">
<Space gap="small" vertical> allowHalf:<Switch v-model="state.allowHalf" /> </Space>
</Col>
<Col :span="6">
<Flex vertical> count:<Slider v-model:value="state.count" :min="3" :max="10" /> </Flex>
</Col>
<Col :span="6">
<Flex vertical> size:<Slider v-model:value="state.size" :min="10" :max="100" /> </Flex>
</Col>
<Col :span="6">
<Flex gap="small" vertical> color:<Input v-model:value="state.color" placeholder="color" /> </Flex>
</Col>
<Col :span="6">
<Flex vertical> gap:<Slider v-model:value="state.gap" :min="0" :max="100" /> </Flex>
</Col>
<Col :span="6">
<Space gap="small" vertical> disabled:<Switch v-model="state.disabled" /> </Space>
</Col>
<Col :span="6">
<Flex gap="small" vertical> effect：<Select :options="characterOptions" v-model="state.character" /> </Flex>
</Col>
<Col :span="6" v-if="state.character === 'custom-character'">
<Flex gap="small" vertical> character:<Input v-model:value="state.customCharacter" placeholder="customCharacter" /> </Flex>
</Col>
</Row>
<Badge :value="score" style="margin-top: 30px">
<Rate
:allow-clear="state.allowClear"
:allow-half="state.allowHalf"
:count="state.count"
:character="state.character === 'custom-character' ? state.customCharacter : state.character"
:size="state.size"
:color="state.color"
:gap="state.gap"
:disabled="state.disabled"
v-model:value="score"
/>
</Badge>
</div>
</template>
