132 lines
3.1 KiB
Vue
132 lines
3.1 KiB
Vue
<template>
|
|
<div class="icon-selector">
|
|
<el-input
|
|
:model-value="modelValue"
|
|
placeholder="点击选择图标"
|
|
readonly
|
|
@click="popoverVisible = true"
|
|
>
|
|
<template #prefix>
|
|
<el-icon v-if="modelValue" :size="18">
|
|
<component :is="modelValue" />
|
|
</el-icon>
|
|
</template>
|
|
<template #suffix>
|
|
<el-icon v-if="modelValue" class="clear-btn" @click.stop="handleClear"><CircleClose /></el-icon>
|
|
</template>
|
|
</el-input>
|
|
|
|
<el-dialog v-model="popoverVisible" title="选择图标" width="680px" append-to-body>
|
|
<el-input v-model="searchKey" placeholder="搜索图标名称" clearable class="icon-search">
|
|
<template #prefix>
|
|
<el-icon><Search /></el-icon>
|
|
</template>
|
|
</el-input>
|
|
<div class="icon-grid">
|
|
<div
|
|
v-for="name in filteredIcons"
|
|
:key="name"
|
|
class="icon-item"
|
|
:class="{ active: modelValue === name }"
|
|
@click="handleSelect(name)"
|
|
>
|
|
<el-icon :size="22"><component :is="name" /></el-icon>
|
|
<span class="icon-name">{{ name }}</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="filteredIcons.length === 0" class="icon-empty">
|
|
未找到匹配的图标
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
|
import { Search, CircleClose } from '@element-plus/icons-vue'
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: String, default: '' }
|
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const popoverVisible = ref(false)
|
|
const searchKey = ref('')
|
|
|
|
const allIcons = Object.keys(ElementPlusIconsVue).sort()
|
|
|
|
const filteredIcons = computed(() => {
|
|
if (!searchKey.value) return allIcons
|
|
const key = searchKey.value.toLowerCase()
|
|
return allIcons.filter(name => name.toLowerCase().includes(key))
|
|
})
|
|
|
|
const handleSelect = (name) => {
|
|
emit('update:modelValue', name)
|
|
popoverVisible.value = false
|
|
searchKey.value = ''
|
|
}
|
|
|
|
const handleClear = () => {
|
|
emit('update:modelValue', '')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.icon-selector { width: 100%; }
|
|
.icon-search { margin-bottom: 12px; }
|
|
.icon-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 8px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
padding: 4px;
|
|
}
|
|
.icon-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 10px 4px;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.icon-item:hover {
|
|
border-color: #409eff;
|
|
background: #ecf5ff;
|
|
color: #409eff;
|
|
}
|
|
.icon-item.active {
|
|
border-color: #409eff;
|
|
background: #409eff;
|
|
color: #fff;
|
|
}
|
|
.icon-name {
|
|
font-size: 11px;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
word-break: break-all;
|
|
max-width: 80px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.icon-empty {
|
|
text-align: center;
|
|
color: #909399;
|
|
padding: 40px 0;
|
|
font-size: 14px;
|
|
}
|
|
.clear-btn {
|
|
cursor: pointer;
|
|
color: #c0c4cc;
|
|
transition: color 0.2s;
|
|
}
|
|
.clear-btn:hover { color: #f56c6c; }
|
|
</style>
|