gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【更新】图标选择器增加清除小圆点

pull/248/head
俞宝山 2025-02-21 12:58:25 +08:00
parent 64f81dcdae
commit 0e44800b3a
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
snowy-admin-web/src/components/XnIconSelector/index.vue
View File

@ -50,6 +50,9 @@
<component v-if="selectedIcon" :is="selectedIcon" /> <component v-if="selectedIcon" :is="selectedIcon" />
<SearchOutlined v-else /> <SearchOutlined v-else />
</template> </template>
<template #suffix>
<close-circle-outlined v-if="selectedIcon && !disabled" class="clear-icon" @click.stop="handleClear" />
</template>
</a-input> </a-input>
</a-popover> </a-popover>
</div> </div>
@ -58,7 +61,7 @@
<script setup> <script setup>
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import config from '@/config/iconSelect' import config from '@/config/iconSelect'
import { SearchOutlined } from '@ant-design/icons-vue' import { SearchOutlined, CloseCircleOutlined } from '@ant-design/icons-vue'
const props = defineProps({ const props = defineProps({
value: { value: {
@ -115,6 +118,12 @@
visible.value = false visible.value = false
} }
const handleClear = () => {
selectedIcon.value = ''
emit('update:value', '')
emit('change', '')
}
const handleTabChange = (key) => { const handleTabChange = (key) => {
activeKey.value = key activeKey.value = key
// 重置当前分类为default // 重置当前分类为default
@ -129,6 +138,16 @@
:deep(.ant-input) { :deep(.ant-input) {
cursor: pointer; cursor: pointer;
} }
:deep(.clear-icon) {
cursor: pointer;
color: rgba(0, 0, 0, 0.25);
transition: color 0.3s;
font-size: 12px;
&:hover {
color: rgba(0, 0, 0, 0.45);
}
}
} }
.icon-category { .icon-category {