fix: Icon选择优化

src/components/IconSelect/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="icon-select">
-		<el-input v-model="iconName" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">
+		<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">
@@ -9,7 +9,7 @@
 				:key="index"
 				:title="item"
 				:class="`item ${item === iconName ? 'active' : ''}`"
-				@click="selectedIcon(item)"
+				@click="updateIcon(item)"
 			>
 				<svg-icon class="local_icon" :icon-class="item" />
 				<span class="text text-overflow_ellipsis">{{ item }}</span>
@@ -19,8 +19,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-
+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) {
@@ -30,8 +39,13 @@ for (const path in modules) {
 const iconList = ref(icons)
 
 const iconName = ref('')
-
-const emit = defineEmits(['selected'])
+watch(
+	() => props.modelValue,
+	(val: string) => {
+		iconName.value = val
+	}
+)
+const emit = defineEmits(['update:modelValue'])
 
 function filterIcons() {
 	iconList.value = icons
@@ -40,8 +54,8 @@ function filterIcons() {
 	}
 }
 
-function selectedIcon(name: string) {
-	emit('selected', name)
+function updateIcon(name: string) {
+	emit('update:modelValue', name)
 	iconName.value = name
 	document.body.click()
 }