From 4092bca2fb24e69c533139a88a8b236ec2d38c52 Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Sat, 3 Sep 2022 16:14:25 +0800
Subject: [PATCH 1/3] fix(components): [rate] fast move mouseLeave not
 triggered

---
 packages/components/rate/src/rate.vue | 45 ++++++++++++++-------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/packages/components/rate/src/rate.vue b/packages/components/rate/src/rate.vue
index d9a71c2155062..457d6aa23fd2d 100644
--- a/packages/components/rate/src/rate.vue
+++ b/packages/components/rate/src/rate.vue
@@ -30,10 +30,10 @@
           ns.is('active', item <= currentValue),
         ]"
       >
-        <component
-          :is="iconComponents[item - 1]"
-          v-if="!showDecimalIcon(item)"
-        />
+        <template v-if="!showDecimalIcon(item)">
+          <component :is="activeComponent" v-show="item <= currentValue" />
+          <component :is="voidComponent" v-show="!(item <= currentValue)" />
+        </template>
         <el-icon
           v-if="showDecimalIcon(item)"
           :style="decimalStyle"
@@ -49,13 +49,14 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { type CSSProperties, computed, inject, ref, watch } from 'vue'
+import { computed, inject, markRaw, ref, watch } from 'vue'
 import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { hasClass, isArray, isObject } from '@element-plus/utils'
+import { hasClass, isArray, isObject, isString } from '@element-plus/utils'
 import { formContextKey, formItemContextKey } from '@element-plus/tokens'
 import { ElIcon } from '@element-plus/components/icon'
 import { useFormItemInputId, useNamespace, useSize } from '@element-plus/hooks'
 import { rateEmits, rateProps } from './rate'
+import type { CSSProperties } from 'vue'
 
 function getValueFromMap<T>(
   value: number,
@@ -147,34 +148,36 @@ const decimalStyle = computed(() => {
     width,
   }
 })
-const componentMap = computed(() =>
-  isArray(props.icons)
+const componentMap = computed(() => {
+  const icons = markRaw(
+    isArray(props.icons) ? [...props.icons] : { ...props.icons }
+  )
+  return isArray(icons)
     ? {
-        [props.lowThreshold]: props.icons[0],
+        [props.lowThreshold]: icons[0],
         [props.highThreshold]: {
-          value: props.icons[1],
+          value: icons[1],
           excluded: true,
         },
-        [props.max]: props.icons[2],
+        [props.max]: icons[2],
       }
-    : props.icons
-)
+    : icons
+})
 const decimalIconComponent = computed(() =>
   getValueFromMap(props.modelValue, componentMap.value)
 )
 const voidComponent = computed(() =>
-  rateDisabled.value ? props.disabledVoidIcon : props.voidIcon
+  rateDisabled.value
+    ? isString(props.disabledVoidIcon)
+      ? props.disabledVoidIcon
+      : markRaw(props.disabledVoidIcon)
+    : isString(props.voidIcon)
+    ? props.voidIcon
+    : markRaw(props.voidIcon)
 )
 const activeComponent = computed(() =>
   getValueFromMap(currentValue.value, componentMap.value)
 )
-const iconComponents = computed(() => {
-  const result = Array.from({ length: props.max })
-  const threshold = currentValue.value
-  result.fill(activeComponent.value, 0, threshold)
-  result.fill(voidComponent.value, threshold, props.max)
-  return result
-})
 
 function showDecimalIcon(item: number) {
   const showWhenDisabled =

From b3465d2970b3414d4c40c4c62ee7f3e51e0235e2 Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Sat, 3 Sep 2022 17:36:07 +0800
Subject: [PATCH 2/3] fix(components): [rate] RawSymbol error

---
 packages/components/rate/src/rate.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/components/rate/src/rate.vue b/packages/components/rate/src/rate.vue
index 457d6aa23fd2d..4c4b09e07883a 100644
--- a/packages/components/rate/src/rate.vue
+++ b/packages/components/rate/src/rate.vue
@@ -149,9 +149,8 @@ const decimalStyle = computed(() => {
   }
 })
 const componentMap = computed(() => {
-  const icons = markRaw(
-    isArray(props.icons) ? [...props.icons] : { ...props.icons }
-  )
+  let icons = isArray(props.icons) ? [...props.icons] : { ...props.icons }
+  icons = markRaw(icons)
   return isArray(icons)
     ? {
         [props.lowThreshold]: icons[0],

From 50cd0938cd16ccb77a61564693bf37a80e765344 Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Sat, 3 Sep 2022 18:00:03 +0800
Subject: [PATCH 3/3] fix(components): [rate] RawSymbol error

---
 packages/components/rate/src/rate.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/components/rate/src/rate.vue b/packages/components/rate/src/rate.vue
index 4c4b09e07883a..52dc14a12caec 100644
--- a/packages/components/rate/src/rate.vue
+++ b/packages/components/rate/src/rate.vue
@@ -56,7 +56,8 @@ import { formContextKey, formItemContextKey } from '@element-plus/tokens'
 import { ElIcon } from '@element-plus/components/icon'
 import { useFormItemInputId, useNamespace, useSize } from '@element-plus/hooks'
 import { rateEmits, rateProps } from './rate'
-import type { CSSProperties } from 'vue'
+import type { iconPropType } from '@element-plus/utils'
+import type { CSSProperties, Component } from 'vue'
 
 function getValueFromMap<T>(
   value: number,
@@ -150,7 +151,9 @@ const decimalStyle = computed(() => {
 })
 const componentMap = computed(() => {
   let icons = isArray(props.icons) ? [...props.icons] : { ...props.icons }
-  icons = markRaw(icons)
+  icons = markRaw(icons) as
+    | Array<string | Component>
+    | Record<number, string | Component>
   return isArray(icons)
     ? {
         [props.lowThreshold]: icons[0],
@@ -169,10 +172,10 @@ const voidComponent = computed(() =>
   rateDisabled.value
     ? isString(props.disabledVoidIcon)
       ? props.disabledVoidIcon
-      : markRaw(props.disabledVoidIcon)
+      : (markRaw(props.disabledVoidIcon) as typeof iconPropType)
     : isString(props.voidIcon)
     ? props.voidIcon
-    : markRaw(props.voidIcon)
+    : (markRaw(props.voidIcon) as typeof iconPropType)
 )
 const activeComponent = computed(() =>
   getValueFromMap(currentValue.value, componentMap.value)