[拓展]评分组件增加可自定义图标

src/module/rate/index.vue

@@ -6,7 +6,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { defineProps, ref, withDefaults } from "vue";
+import { computed, defineProps, ref, withDefaults } from "vue";
 import "./index.less";
 
 export interface LayRateProps {
@@ -17,6 +17,7 @@ export interface LayRateProps {
   half?: boolean;
   text?: boolean;
   isBlock?: boolean;
+  icons?: string[];
 }
 
 const props = withDefaults(defineProps<LayRateProps>(), {
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<LayRateProps>(), {
   half: false,
   text: false,
   isBlock: false,
+  icons: () => ['layui-icon-rate', 'layui-icon-rate-half', 'layui-icon-rate-solid']
 });
 
 const emit = defineEmits(["update:modelValue", "select"]);
@@ -34,17 +36,14 @@ const currentValue = ref<number>(props.modelValue);
 // 临时存储值
 const tempValue = ref(currentValue.value);
 // 是否存在半颗星
-const isHalf = ref(
-  props.half && Math.round(currentValue.value) >= currentValue.value
-);
+const isHalf = computed(()=>props.half && Math.round(currentValue.value) !== currentValue.value);
 
 // 计算评分星值
 const getValue = function (index: number, event: any): number {
   if (!props.half) {
     return index;
   }
-  isHalf.value = event.offsetX <= event.target.offsetWidth / 2;
-  return index - (isHalf.value ? 0.5 : 0);
+  return index - (event.offsetX <= event.target.offsetWidth / 2 ? 0.5 : 0);
 };
 
 // 在评分星移动事件
@@ -61,7 +60,6 @@ const mouseleave = function (index: number, event: any) {
     return false;
   }
   currentValue.value = tempValue.value;
-  isHalf.value = props.half && Math.round(currentValue.value) >= currentValue.value;
 };
 
 // 选择评分星 --> 单击事件
@@ -91,14 +89,12 @@ const action = function (index: number, event: any) {
           :class="[
             'layui-icon',
             `${
-              half && isHalf && currentValue%1 != 0 && index === Math.ceil(currentValue)
-                ? 'layui-icon-rate-half'
-                : 'layui-icon-rate-solid'
+              icons[icons.length - (isHalf && index === Math.ceil(currentValue) ? 2: 1)]
             }`,
           ]"
           :style="{ color: theme }"
         />
-        <i v-else class="layui-icon layui-icon-rate" :style="{ color: theme }"/>
+        <i v-else :class="['layui-icon'].concat(icons[0])" :style="{ color: theme }"/>
       </li>
     </ul>
     <template v-if="text">