pqs-9100_client/frontend/src/components/SelectIcon/index.vue

<template>
    <div class="icon-box">
        <el-input
            ref="inputRef"
            v-model="valueIcon"
            v-bind="$attrs"
            :placeholder="placeholder"
            :clearable="clearable"
            @clear="clearIcon"
            @click="openDialog"
        >
            <template #append>
                <el-button :icon="customIcons[iconValue]" />
            </template>
        </el-input>
        <el-dialog v-model="dialogVisible" :title="placeholder" top="5%" width="30%">
            <el-input v-model="inputValue" placeholder="搜索图标" size="large" :prefix-icon="Icons.Search" />
            <el-scrollbar v-if="Object.keys(iconsList).length">
                <div class="icon-list">
                    <div v-for="item in iconsList" :key="item" class="icon-item" @click="selectIcon(item)">
                        <component :is="item"></component>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </el-scrollbar>
            <el-empty v-else description="未搜索到您要找的图标~" />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="SelectIcon">
import * as Icons from '@element-plus/icons-vue'
import { computed, ref } from 'vue'

interface SelectIconProps {
    iconValue: string | undefined
    title?: string
    clearable?: boolean
    placeholder?: string
}

const props = withDefaults(defineProps<SelectIconProps>(), {
    iconValue: '',
    title: '请选择图标',
    clearable: true,
    placeholder: '请选择图标'
})

// 重新接收一下，防止打包后 clearable 报错
const valueIcon = ref(props.iconValue)

// open Dialog
const dialogVisible = ref(false)
const openDialog = () => (dialogVisible.value = true)

// 选择图标(触发更新父组件数据)
const emit = defineEmits<{
    'update:iconValue': [value: string]
}>()
const selectIcon = (item: any) => {
    dialogVisible.value = false
    valueIcon.value = item.name
    emit('update:iconValue', item.name)
    setTimeout(() => inputRef.value.blur(), 0)
}

// 清空图标
const inputRef = ref()
const clearIcon = () => {
    valueIcon.value = ''
    emit('update:iconValue', '')
    setTimeout(() => inputRef.value.blur(), 0)
}

// 监听搜索框值
const inputValue = ref('')
const customIcons: { [key: string]: any } = Icons
const iconsList = computed((): { [key: string]: any } => {
    if (!inputValue.value) return Icons
    let result: { [key: string]: any } = {}
    for (const key in customIcons) {
        if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result[key] = customIcons[key]
    }
    return result
})
</script>

<style scoped lang="scss">
@use './index.scss';
</style>