perf: 图标选择器逻辑优化
This commit is contained in:
parent
a926c5607a
commit
c2dde25229
|
@ -90,6 +90,11 @@ const popoverShow = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const iconSelect = (icon: string) => {
|
const iconSelect = (icon: string) => {
|
||||||
|
// 如果是同一个icon则不做处理,则相当于点击了清空按钮
|
||||||
|
if (icon === unref(modelValue)) {
|
||||||
|
modelValue.value = ''
|
||||||
|
return
|
||||||
|
}
|
||||||
modelValue.value = icon
|
modelValue.value = icon
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -106,7 +111,7 @@ const inputClear = () => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="prefixCls" class="flex justify-center items-center box">
|
<div :class="prefixCls" class="flex justify-center items-center box">
|
||||||
<ElInput disabled v-model="modelValue" />
|
<ElInput disabled v-model="modelValue" clearable />
|
||||||
<ElPopover
|
<ElPopover
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
|
@ -144,8 +149,10 @@ const inputClear = () => {
|
||||||
icon === modelValue ? 'var(--el-color-primary)' : 'var(--el-border-color)'
|
icon === modelValue ? 'var(--el-color-primary)' : 'var(--el-border-color)'
|
||||||
}`,
|
}`,
|
||||||
boxSizing: 'border-box',
|
boxSizing: 'border-box',
|
||||||
margin: '2px'
|
margin: '2px',
|
||||||
|
transition: 'all 0.3s'
|
||||||
}"
|
}"
|
||||||
|
class="hover:border-color-[var(--el-color-primary)]!"
|
||||||
@click="iconSelect(icon)"
|
@click="iconSelect(icon)"
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
const currentIcon = ref('tdesign:book-open')
|
const currentIcon = ref('')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
Loading…
Reference in New Issue