Vue3评分（Rate）

可自定义设置以下属性是否允许再次点击后清除allowClear类型boolean默认 true是否允许半选allowHalf类型boolean默认 falsestar 总数count类型number默认 5自定义字符character类型star-outlined | star-filled | heart-outlined | heart-filled | string | slot 默认 star-filled预置四种图标字符大小size类型number单位 px默认 20字符选中颜色color类型string默认 #fadb14字符间距gap类型number单位 px默认 8只读无法进行交互disabled类型boolean默认 false当前数受控值 0,1,2,3...v-model:value类型number默认 0效果如下图在线预览①创建评分组件Rate.vue其中引入使用了以下组件Vue3文字提示Tooltipscript setup langts import { ref, watch } from vue import Tooltip from components/tooltip export interface Props { allowClear?: boolean // 是否允许再次点击后清除 allowHalf?: boolean // 是否允许半选 count?: number // star 总数 character?: star-outlined | star-filled | heart-outlined | heart-filled | string // 字符或图标预置四种图标 string | slot size?: number // 字符大小单位 px color?: string // 字符选中颜色 gap?: number // 字符间距单位 px disabled?: boolean // 只读无法进行交互 tooltips?: string[] // 自定义每项的提示信息 tooltipProps?: object // Tooltip 组件属性配置参考 Tooltip Props value?: number // (v-model) 当前数受控值 0,1,2,3... } const props withDefaults(definePropsProps(), { allowClear: true, allowHalf: false, count: 5, character: star-filled, size: 20, color: #fadb14, gap: 8, disabled: false, tooltips: () [], tooltipProps: () ({}), value: 0 }) const activeValue ref() const hoverValue ref() const tempValue ref() // 清除时保存点击value const emits defineEmits([update:value, change, hoverChange]) watch( () props.value, (to) { activeValue.value to }, { immediate: true } ) watch( activeValue, (to) { hoverValue.value to }, { immediate: true } ) function onClick(value: number): void { tempValue.value null if (value ! activeValue.value) { activeValue.value value emits(change, value) // 选择时的回调 emits(update:value, value) } else { if (props.allowClear) { tempValue.value value activeValue.value 0 emits(change, 0) emits(update:value, 0) } else { // 不允许清除 emits(change, value) // 选择时的回调 } } } function onFirstEnter(value: number): void { hoverValue.value value emits(hoverChange, value) // 鼠标经过时数值变化的回调 } function onSecondEnter(value: number): void { hoverValue.value value emits(hoverChange, value) } function resetTempValue(): void { // 重置点击 value tempValue.value null } function onLeave(): void { hoverValue.value activeValue.value } function onUp(): void { tempValue.value null if (activeValue.value props.count) { activeValue.value props.allowHalf ? 0.5 : 1 emits(change, activeValue.value) emits(update:value, activeValue.value) } } function onDown(): void { tempValue.value null if (activeValue.value 0) { activeValue.value - props.allowHalf ? 0.5 : 1 emits(change, activeValue.value) emits(update:value, activeValue.value) } } /script template div classrate-wrap :class{ rate-disabled: disabled } :style--rate-star-color: ${color}; --rate-star-gap: ${gap}px; --rate-star-size: ${size}px; mouseleaveonLeave template v-forn in count :keyn Tooltip v-bindtooltipProps template v-iftooltips[n - 1] #tooltip slot nametooltip :tooltiptooltips[n - 1] :valuen{{ tooltips[n - 1] }}/slot /template div tabindex0 classrate-star :class{ star-half: allowHalf hoverValue n - 0.5 hoverValue n, star-full: hoverValue n, temp-gray: !allowHalf tempValue n } clickallowHalf ? () false : onClick(n) keydown.prevent.rightonUp keydown.prevent.leftonDown div v-ifallowHalf classstar-first :class{ temp-gray-first: tempValue n - 0.5 } click.stoponClick(n - 0.5) mouseenteronFirstEnter(n - 0.5) mouseleaveresetTempValue slot namecharacter :valuen svg v-ifcharacter star-filled classicon-character focusablefalse >script setup langts import Rate from ./Rate.vue import { ref, watchEffect, reactive } from vue import { ThunderboltFilled, LikeFilled, FireFilled } from ant-design/icons-vue const value ref(3) const tooltipsChinese [极差, 失望, 一般, 满意, 惊喜] const tooltipsEnglish [terrible, bad, normal, good, wonderful] 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 }) watchEffect(() { console.log(value, value.value) }) function onChange(value: number) { console.log(change, value) } function onHoverChange(value: number) { console.log(hover change, value) } /script template div h1{ { $route.name }} { { $route.meta.title }}/h1 h2 classmt30 mb10基本使用/h2 Rate v-model:valuevalue changeonChange hoverChangeonHoverChange / h2 classmt30 mb10文案提示/h2 Space vertical Space aligncenter Rate v-model:valuevalue :tooltipstooltipsChinese / Tag colorblue :borderedfalse { { tooltipsChinese[value - 1] }} /Tag /Space Space aligncenter Rate v-model:valuevalue :tooltipstooltipsEnglish :tooltip-props{ bgColor: #fff, tooltipStyle: { fontWeight: 500, color: rgba(0, 0, 0, 0.88) } } / Tag colorred :borderedfalse { { tooltipsEnglish[value - 1] }} /Tag /Space /Space h2 classmt30 mb10禁用/h2 Rate v-model:valuevalue disabled / h2 classmt30 mb10预置图标/h2 Space vertical Rate v-model:valuevalue characterstar-outlined :size24 / Rate v-model:valuevalue characterheart-filled :size24 / Rate v-model:valuevalue characterheart-outlined :size24 / /Space h2 classmt30 mb10半星/h2 Rate v-model:valuevalue :size24 allow-half / h2 classmt30 mb10自定义字符/h2 Space vertical Rate v-model:valuevalue character好 :size32 allow-half / Rate v-model:valuevalue characterA :size48 allow-half / Rate v-model:valuevalue :size32 allow-half template #character ThunderboltFilled / /template /Rate /Space h2 classmt30 mb10自定义颜色/h2 Space vertical Rate v-model:valuevalue color#1677FF :size32 allow-half / Rate v-model:valuevalue color#ff6900 :size32 allow-half template #character LikeFilled / /template /Rate Rate v-model:valuevalue color#d4380d :size32 allow-half template #character FireFilled / /template /Rate /Space h2 classmt30 mb10自定义间距/h2 Rate v-model:valuevalue :size32 :gap16 / h2 classmt30 mb10自定义 star 总数/h2 Rate v-model:valuevalue :size32 :count10 / h2 classmt30 mb10评分配置器/h2 Row :gutter[24, 12] Col :span6 Space vertical allowClear:Switch v-modelstate.allowClear / /Space /Col Col :span6 Space vertical allowHalf:Switch v-modelstate.allowHalf / /Space /Col Col :span6 Flex gapsmall vertical count:Slider v-model:valuestate.count :min3 :max10 / /Flex /Col Col :span6 Flex gapsmall vertical size:Slider v-model:valuestate.size :min10 :max100 / /Flex /Col Col :span6 Flex gapsmall vertical color:ColorPicker v-model:valuestate.color / /Flex /Col Col :span6 Flex gapsmall vertical gap:Slider v-model:valuestate.gap :min0 :max100 / /Flex /Col Col :span6 Space vertical disabled:Switch v-modelstate.disabled / /Space /Col Col :span6 Flex gapsmall vertical effectSelect :optionscharacterOptions v-modelstate.character / /Flex /Col Col :span6 v-ifstate.character custom-character Flex gapsmall vertical character:Input v-model:valuestate.customCharacter placeholdercustomCharacter / /Flex /Col /Row Badge :valuevalue stylemargin-top: 30px Rate v-bindstate :characterstate.character custom-character ? state.customCharacter : state.character v-model:valuevalue / /Badge /div /template