aizuda-web-vue3/src/components/IconSelect/index.vue

<template>
	<div class="icon-select">
		<el-input v-model="iconName" :disabled="disabled" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
			<template #suffix><i class="el-icon-search el-input__icon" /></template>
		</el-input>
		<div class="icon-select__list">
			<div
				v-for="(item, index) in iconList"
				:key="index"
				:title="item"
				:class="`item ${item === iconName ? 'active' : ''}`"
				@click="updateIcon(item)"
			>
				<svg-icon class="local_icon" :icon-class="item" />
				<span class="text text-overflow_ellipsis">{{ item }}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps({
	modelValue: {
		type: String,
		default: ''
	},
	disabled: {
		type: Boolean,
		default: false
	}
})
const icons = [] as string[]
const modules = import.meta.glob('../../assets/icons/*.svg')
for (const path in modules) {
	const p = path.split('assets/icons/')[1].split('.svg')[0]
	icons.push(p)
}
const iconList = ref(icons)

const iconName = ref('')
watch(
	() => props.modelValue,
	(val: string) => {
		iconName.value = val
	}
)
const emit = defineEmits(['update:modelValue'])

function filterIcons() {
	iconList.value = icons
	if (iconName.value) {
		iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1)
	}
}

function updateIcon(name: string) {
	emit('update:modelValue', name)
	iconName.value = name
	document.body.click()
}

function reset() {
	iconName.value = ''
	iconList.value = icons
}

defineExpose({
	reset
})
</script>

<style lang="scss" scoped>
.icon-select {
	width: 100%;
	//padding: 10px;

	&__list {
		margin-top: 8px;
		height: 200px;
		overflow-y: scroll;

		.item {
			height: 30px;
			line-height: 30px;
			margin-bottom: -5px;
			cursor: pointer;
			width: 33.33%;
			float: left;
			color: #999;
			display: flex;
			align-items: center;
			//justify-content: ;
			&.active {
				color: var(--el-color-primary);
			}
		}
		.local_icon {
			height: 30px;
			width: 16px;
			margin-right: 5px;
		}
		.text {
			flex: 1;
		}
	}
}
</style>