test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 12:17:37 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(components): [rate] fast move mouseLeave not triggered (#9608)

Browse Source 
* fix(components): [rate] fast move mouseLeave not triggered

* fix(components): [rate] RawSymbol error

* fix(components): [rate] RawSymbol error
This commit is contained in:
Xc 2022-09-06 14:55:26 +08:00 committed by GitHub
parent 51a3c454ea
commit 3dca453cc0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/components/rate/src/rate.vue
View File

@ -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,15 @@
</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 { iconPropType } from '@element-plus/utils'
import type { CSSProperties, Component } from 'vue'
function getValueFromMap<T>(
value: number,
@ -147,34 +149,37 @@ const decimalStyle = computed(() => {
width,
}
})
const componentMap = computed(() =>
isArray(props.icons)
const componentMap = computed(() => {
let icons = isArray(props.icons) ? [...props.icons] : { ...props.icons }
icons = markRaw(icons) as
| Array<string | Component>
| Record<number, string | Component>
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) as typeof iconPropType)
: isString(props.voidIcon)
? props.voidIcon
: (markRaw(props.voidIcon) as typeof iconPropType)
)
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 =