Ant Design of Vue图标选择器

1.组件路径

2.index.js

import VIconSelector from "./VIconSelector.vue";
//定义注册
VIconSelector.install = (app) => {app.component(VIconSelector.name, VIconSelector)
}
export default VIconSelector 

3.VIconSelector.vue

<template><div class="icon-selector"><a-selectv-model:value="selectedIcon":style="{ width: width }":placeholder="placeholder":allowClear="allowClear"show-search:filter-option="filterOption"@change="handleChange"option-label-prop="label"><template #suffixIcon><component v-if="selectedIcon" :is="selectedIcon" /></template><a-select-option v-for="icon in iconList" :key="icon" :value="icon" :label="getChineseName(icon)"><div class="icon-item"><component :is="icon" class="icon-preview" /><div class="icon-text"><div class="icon-name-cn">{{ getChineseName(icon) }}</div></div></div></a-select-option></a-select></div>
</template><script>
import { defineComponent, ref, watch } from 'vue';export default defineComponent({name: 'v-icon-selector',props: {modelValue: {type: String,default: ''},width: {type: String,default: '300px'},placeholder: {type: String,default: '请选择图标'},allowClear: {type: Boolean,default: true}},emits: ['update:modelValue', 'change'],setup(props, { emit }) {const selectedIcon = ref(props.modelValue);// 图标中文名称映射const iconChineseNames = {// 方向性图标'StepBackwardOutlined': '后退','StepForwardOutlined': '前进','FastBackwardOutlined': '快退','FastForwardOutlined': '快进','ShrinkOutlined': '缩小','ArrowsAltOutlined': '扩大','DownOutlined': '向下','UpOutlined': '向上','LeftOutlined': '向左','RightOutlined': '向右','CaretUpOutlined': '上三角','CaretDownOutlined': '下三角','CaretLeftOutlined': '左三角','CaretRightOutlined': '右三角','UpCircleOutlined': '圆形上','DownCircleOutlined': '圆形下','LeftCircleOutlined': '圆形左','RightCircleOutlined': '圆形右','DoubleRightOutlined': '双右','DoubleLeftOutlined': '双左','VerticalLeftOutlined': '垂直左','VerticalRightOutlined': '垂直右','VerticalAlignTopOutlined': '垂直顶对齐','VerticalAlignMiddleOutlined': '垂直居中对齐','VerticalAlignBottomOutlined': '垂直底对齐','ForwardOutlined': '转发','BackwardOutlined': '返回','RollbackOutlined': '回滚','EnterOutlined': '进入','RetweetOutlined': '重新发送','SwapOutlined': '交换','SwapLeftOutlined': '左交换','SwapRightOutlined': '右交换','ArrowUpOutlined': '箭头上','ArrowDownOutlined': '箭头下','ArrowLeftOutlined': '箭头左','ArrowRightOutlined': '箭头右','PlayCircleOutlined': '播放圆形','UpSquareOutlined': '方形上','DownSquareOutlined': '方形下','LeftSquareOutlined': '方形左','RightSquareOutlined': '方形右','LoginOutlined': '登录','LogoutOutlined': '登出','MenuFoldOutlined': '菜单折叠','MenuUnfoldOutlined': '菜单展开','BorderBottomOutlined': '下边框','BorderHorizontalOutlined': '水平边框','BorderInnerOutlined': '内边框','BorderOuterOutlined': '外边框','BorderLeftOutlined': '左边框','BorderRightOutlined': '右边框','BorderTopOutlined': '上边框','BorderVerticleOutlined': '垂直边框','PicCenterOutlined': '居中图片','PicLeftOutlined': '左对齐图片','PicRightOutlined': '右对齐图片','RadiusBottomleftOutlined': '左下圆角','RadiusBottomrightOutlined': '右下圆角','RadiusUpleftOutlined': '左上圆角','RadiusUprightOutlined': '右上圆角','FullscreenOutlined': '全屏','FullscreenExitOutlined': '退出全屏',// 提示建议类图标'QuestionCircleFilled': '问号圆形','PlusCircleFilled': '加号圆形','PauseCircleFilled': '暂停圆形','MinusCircleFilled': '减号圆形','PlusSquareFilled': '加号方形','MinusSquareFilled': '减号方形','InfoCircleFilled': '信息圆形','ExclamationCircleFilled': '感叹号圆形','CloseCircleFilled': '关闭圆形','CloseSquareFilled': '关闭方形','CheckCircleFilled': '对勾圆形','CheckSquareFilled': '对勾方形','ClockCircleFilled': '时钟圆形','WarningFilled': '警告','StopFilled': '停止',// 编辑类图标'EditOutlined': '编辑','FormOutlined': '表单','CopyOutlined': '复制','ScissorOutlined': '剪切','DeleteOutlined': '删除','SnippetsOutlined': '代码片段','DiffOutlined': '对比','HighlightOutlined': '高亮','AlignCenterOutlined': '居中对齐','AlignLeftOutlined': '左对齐','AlignRightOutlined': '右对齐','BgColorsOutlined': '背景色','BoldOutlined': '粗体','ItalicOutlined': '斜体','UnderlineOutlined': '下划线','StrikethroughOutlined': '删除线','RedoOutlined': '重做','UndoOutlined': '撤销','ZoomInOutlined': '放大','ZoomOutOutlined': '缩小','FontColorsOutlined': '字体颜色','FontSizeOutlined': '字体大小','LineHeightOutlined': '行高','OrderedListOutlined': '有序列表','UnorderedListOutlined': '无序列表',// 数据类图标'AreaChartOutlined': '面积图','PieChartOutlined': '饼图','BarChartOutlined': '柱状图','DotChartOutlined': '点图','LineChartOutlined': '折线图','RadarChartOutlined': '雷达图','HeatMapOutlined': '热力图','FallOutlined': '下降','RiseOutlined': '上升','StockOutlined': '股票','BoxPlotOutlined': '箱型图','FundOutlined': '基金','SlidersOutlined': '滑动条',// 品牌和标识'AndroidFilled': '安卓','AppleFilled': '苹果','WindowsFilled': '微软','ChromeFilled': '谷歌浏览器','GithubFilled': 'GitHub','AliwangwangFilled': '阿里旺旺','WeiboSquareFilled': '微博方形','WeiboCircleFilled': '微博圆形','TaobaoCircleFilled': '淘宝圆形','Html5Filled': 'HTML5','WechatFilled': '微信','YoutubeFilled': 'YouTube','AlipayCircleFilled': '支付宝圆形','SkypeFilled': 'Skype','GitlabFilled': 'GitLab','LinkedinFilled': '领英','FacebookFilled': '脸书','CodeSandboxCircleFilled': 'CodeSandbox圆形','CodepenCircleFilled': 'Codepen圆形','SlackSquareFilled': 'Slack方形','BehanceSquareFilled': 'Behance方形','DribbbleSquareFilled': 'Dribbble方形','InstagramFilled': 'Instagram','YuqueFilled': '语雀','YahooFilled': '雅虎',// 网站通用图标'AccountBookFilled': '记账本','AlertFilled': '警告','AlipaySquareFilled': '支付宝方形','AmazonCircleFilled': '亚马逊圆形','AmazonSquareFilled': '亚马逊方形','ApiFilled': '接口','AppstoreFilled': '应用商店','AudioFilled': '音频','BankFilled': '银行','BehanceCircleFilled': 'Behance圆形','BellFilled': '铃铛','BookFilled': '书籍','BugFilled': '程序错误','BuildFilled': '构建','BulbFilled': '灯泡','CalculatorFilled': '计算器','CalendarFilled': '日历','CameraFilled': '相机','CarFilled': '汽车','CarryOutFilled': '执行','CiCircleFilled': 'CI圆形','CloudFilled': '云','CodeFilled': '代码','CodeSandboxSquareFilled': 'CodeSandbox方形','CodepenSquareFilled': 'Codepen方形','CompassFilled': '指南针','ContactsFilled': '联系人','ContainerFilled': '容器','ControlFilled': '控制','CopyrightCircleFilled': '版权圆形','CreditCardFilled': '信用卡','CrownFilled': '皇冠','CustomerServiceFilled': '客服','DashboardFilled': '仪表盘','DatabaseFilled': '数据库','DingtalkCircleFilled': '钉钉圆形','DingtalkSquareFilled': '钉钉方形','DislikeFilled': '不喜欢','DollarCircleFilled': '美元圆形','DribbbleCircleFilled': 'Dribbble圆形','DropboxCircleFilled': 'Dropbox圆形','DropboxSquareFilled': 'Dropbox方形','EnvironmentFilled': '环境','EuroCircleFilled': '欧元圆形','ExperimentFilled': '实验','EyeFilled': '眼睛','EyeInvisibleFilled': '隐藏眼睛','FileAddFilled': '新增文件','FileExcelFilled': 'Excel文件','FileExclamationFilled': '文件感叹号','FileFilled': '文件','FileImageFilled': '图片文件','FileMarkdownFilled': 'Markdown文件','FilePdfFilled': 'PDF文件','FilePptFilled': 'PPT文件','FileTextFilled': '文本文件','FileUnknownFilled': '未知文件','FileWordFilled': 'Word文件','FileZipFilled': '压缩文件','FilterFilled': '筛选','FireFilled': '火焰','FlagFilled': '旗帜','FolderAddFilled': '新增文件夹','FolderFilled': '文件夹','FolderOpenFilled': '打开文件夹','FormatPainterFilled': '格式刷','FrownFilled': '皱眉','FunnelPlotFilled': '漏斗图','GiftFilled': '礼物','GoldFilled': '金币','GoldenFilled': '金色','GoogleCircleFilled': '谷歌圆形','GooglePlusCircleFilled': 'Google+圆形','GooglePlusSquareFilled': 'Google+方形','GoogleSquareFilled': '谷歌方形','HddFilled': '硬盘','HeartFilled': '爱心','HomeFilled': '首页','HourglassFilled': '沙漏','IdcardFilled': '身份证','IeCircleFilled': 'IE圆形','IeSquareFilled': 'IE方形','InsuranceFilled': '保险','InteractionFilled': '交互','LayoutFilled': '布局','LikeFilled': '点赞','LockFilled': '锁定','MacCommandFilled': 'Mac命令','MailFilled': '邮件','MedicineBoxFilled': '医药箱','MediumCircleFilled': 'Medium圆形','MediumSquareFilled': 'Medium方形','MehFilled': '一般','MessageFilled': '消息','MobileFilled': '手机','MoneyCollectFilled': '收钱','NotificationFilled': '通知','PayCircleFilled': '支付圆形','PhoneFilled': '电话','PictureFilled': '图片','PlaySquareFilled': '播放方形','PoundCircleFilled': '英镑圆形','PrinterFilled': '打印机','ProfileFilled': '资料','ProjectFilled': '项目','PropertySafetyFilled': '财产安全','PushpinFilled': '图钉','QqCircleFilled': 'QQ圆形','QqSquareFilled': 'QQ方形','ReadFilled': '阅读','ReconciliationFilled': '对账','RedEnvelopeFilled': '红包','RedditCircleFilled': 'Reddit圆形','RedditSquareFilled': 'Reddit方形','RestFilled': '休息','RobotFilled': '机器人','RocketFilled': '火箭','SafetyCertificateFilled': '安全证书','SaveFilled': '保存','ScheduleFilled': '日程表','SecurityScanFilled': '安全扫描','SettingFilled': '设置','ShopFilled': '商店','ShoppingFilled': '购物','SignalFilled': '信号','SketchCircleFilled': 'Sketch圆形','SketchSquareFilled': 'Sketch方形','SkinFilled': '皮肤','SlackCircleFilled': 'Slack圆形','SmileFilled': '笑脸','SoundFilled': '声音','StarFilled': '星星','SwitcherFilled': '切换器','TabletFilled': '平板','TagFilled': '标签','TagsFilled': '标签组','TaobaoSquareFilled': '淘宝方形','ThunderboltFilled': '闪电',// 双色图标'AccountBookTwoTone': '记账本双色','AlertTwoTone': '警告双色','ApiTwoTone': '接口双色','AppstoreTwoTone': '应用商店双色','AudioTwoTone': '音频双色','BankTwoTone': '银行双色','BellTwoTone': '铃铛双色','BookTwoTone': '书籍双色','BugTwoTone': '程序错误双色','BuildTwoTone': '构建双色','BulbTwoTone': '灯泡双色','CalculatorTwoTone': '计算器双色','CalendarTwoTone': '日历双色','CameraTwoTone': '相机双色','CarTwoTone': '汽车双色','CarryOutTwoTone': '执行双色','CiCircleTwoTone': 'CI圆形双色','CiTwoTone': 'CI双色','CloudTwoTone': '云双色','CodeTwoTone': '代码双色','CompassTwoTone': '指南针双色','ContactsTwoTone': '联系人双色','ContainerTwoTone': '容器双色','ControlTwoTone': '控制双色','CopyrightCircleTwoTone': '版权圆形双色','CopyrightTwoTone': '版权双色','CreditCardTwoTone': '信用卡双色','CrownTwoTone': '皇冠双色','CustomerServiceTwoTone': '客服双色','DashboardTwoTone': '仪表盘双色','DatabaseTwoTone': '数据库双色','DislikeTwoTone': '不喜欢双色','DollarCircleTwoTone': '美元圆形双色','DollarTwoTone': '美元双色','EnvironmentTwoTone': '环境双色','EuroCircleTwoTone': '欧元圆形双色','EuroTwoTone': '欧元双色','ExperimentTwoTone': '实验双色','EyeTwoTone': '眼睛双色','EyeInvisibleTwoTone': '隐藏眼睛双色','FileAddTwoTone': '新增文件双色','FileExcelTwoTone': 'Excel文件双色','FileExclamationTwoTone': '文件感叹号双色','FileTwoTone': '文件双色','FileImageTwoTone': '图片文件双色','FileMarkdownTwoTone': 'Markdown文件双色','FilePdfTwoTone': 'PDF文件双色','FilePptTwoTone': 'PPT文件双色','FileTextTwoTone': '文本文件双色','FileUnknownTwoTone': '未知文件双色','FileWordTwoTone': 'Word文件双色','FileZipTwoTone': '压缩文件双色','FilterTwoTone': '筛选双色','FireTwoTone': '火焰双色','FlagTwoTone': '旗帜双色','FolderAddTwoTone': '新增文件夹双色','FolderTwoTone': '文件夹双色','FolderOpenTwoTone': '打开文件夹双色','FrownTwoTone': '皱眉双色','FunnelPlotTwoTone': '漏斗图双色','GiftTwoTone': '礼物双色','GoldTwoTone': '金币双色','HddTwoTone': '硬盘双色','HeartTwoTone': '爱心双色','HomeTwoTone': '首页双色','HourglassTwoTone': '沙漏双色','IdcardTwoTone': '身份证双色','InsuranceTwoTone': '保险双色','InteractionTwoTone': '交互双色','LayoutTwoTone': '布局双色','LikeTwoTone': '点赞双色','LockTwoTone': '锁定双色','MailTwoTone': '邮件双色','MedicineBoxTwoTone': '医药箱双色','MehTwoTone': '一般双色','MessageTwoTone': '消息双色','MobileTwoTone': '手机双色','MoneyCollectTwoTone': '收钱双色','NotificationTwoTone': '通知双色','PhoneTwoTone': '电话双色','PictureTwoTone': '图片双色','PlaySquareTwoTone': '播放方形双色','PoundCircleTwoTone': '英镑圆形双色','PrinterTwoTone': '打印机双色','ProfileTwoTone': '资料双色','ProjectTwoTone': '项目双色','PropertySafetyTwoTone': '财产安全双色','PushpinTwoTone': '图钉双色','ReconciliationTwoTone': '对账双色','RedEnvelopeTwoTone': '红包双色','RestTwoTone': '休息双色','RocketTwoTone': '火箭双色','SafetyCertificateTwoTone': '安全证书双色','SaveTwoTone': '保存双色','ScheduleTwoTone': '日程表双色','SecurityScanTwoTone': '安全扫描双色','SettingTwoTone': '设置双色','ShopTwoTone': '商店双色','ShoppingTwoTone': '购物双色','SkinTwoTone': '皮肤双色','SmileTwoTone': '笑脸双色','SoundTwoTone': '声音双色','StarTwoTone': '星星双色','SwitcherTwoTone': '切换器双色','TabletTwoTone': '平板双色','TagTwoTone': '标签双色','TagsTwoTone': '标签组双色','ThunderboltTwoTone': '闪电双色','ToolTwoTone': '工具双色','TrademarkCircleTwoTone': '商标圆形双色','TrophyTwoTone': '奖杯双色','UnlockTwoTone': '解锁双色','UsbTwoTone': 'USB双色','VideoCameraTwoTone': '摄像机双色','WalletTwoTone': '钱包双色','Html5TwoTone': 'HTML5双色',// 新增其他翻译'CopyFilled': '复制','DeleteFilled': '删除','SnippetsFilled': '代码片段','DiffFilled': '对比','HighlightFilled': '高亮','PieChartFilled': '饼图','BoxPlotFilled': '箱型图','FundFilled': '基金','SlidersFilled': '滑动条'};// 图标列表 - 使用全局已注册的图标const iconList = [// 方向性图标'StepBackwardOutlined', 'StepForwardOutlined', 'FastBackwardOutlined', 'FastForwardOutlined', 'ShrinkOutlined', 'ArrowsAltOutlined', 'DownOutlined', 'UpOutlined', 'LeftOutlined', 'RightOutlined', 'CaretUpOutlined', 'CaretDownOutlined', 'CaretLeftOutlined', 'CaretRightOutlined', 'UpCircleOutlined', 'DownCircleOutlined', 'LeftCircleOutlined', 'RightCircleOutlined', 'DoubleRightOutlined', 'DoubleLeftOutlined', 'VerticalLeftOutlined', 'VerticalRightOutlined', 'VerticalAlignTopOutlined', 'VerticalAlignMiddleOutlined', 'VerticalAlignBottomOutlined', 'ForwardOutlined', 'BackwardOutlined', 'RollbackOutlined', 'EnterOutlined', 'RetweetOutlined', 'SwapOutlined', 'SwapLeftOutlined', 'SwapRightOutlined', 'ArrowUpOutlined', 'ArrowDownOutlined', 'ArrowLeftOutlined', 'ArrowRightOutlined', 'PlayCircleOutlined', 'UpSquareOutlined', 'DownSquareOutlined', 'LeftSquareOutlined', 'RightSquareOutlined', 'LoginOutlined', 'LogoutOutlined', 'MenuFoldOutlined', 'MenuUnfoldOutlined', 'BorderBottomOutlined', 'BorderHorizontalOutlined', 'BorderInnerOutlined', 'BorderOuterOutlined', 'BorderLeftOutlined', 'BorderRightOutlined', 'BorderTopOutlined', 'BorderVerticleOutlined', 'PicCenterOutlined', 'PicLeftOutlined', 'PicRightOutlined', 'RadiusBottomleftOutlined', 'RadiusBottomrightOutlined', 'RadiusUpleftOutlined', 'RadiusUprightOutlined', 'FullscreenOutlined', 'FullscreenExitOutlined',// 提示和状态'QuestionCircleFilled','PlusCircleFilled','PauseCircleFilled','MinusCircleFilled','PlusSquareFilled','MinusSquareFilled','InfoCircleFilled','ExclamationCircleFilled','CloseCircleFilled','CloseSquareFilled','CheckCircleFilled','CheckSquareFilled','ClockCircleFilled','WarningFilled','StopFilled',// 常用图标'CopyFilled','DeleteFilled','SnippetsFilled','DiffFilled','HighlightFilled','PieChartFilled','BoxPlotFilled','FundFilled','SlidersFilled',// 通用业务图标'AccountBookFilled','AlertFilled','ApiFilled','AppstoreFilled','AudioFilled','BankFilled','BellFilled','BookFilled','BugFilled','BuildFilled','BulbFilled','CalculatorFilled','CalendarFilled','CameraFilled','CarFilled','CarryOutFilled','CiCircleFilled','CloudFilled','CodeFilled','CompassFilled','ContactsFilled','ContainerFilled','ControlFilled','CopyrightCircleFilled','CreditCardFilled','CrownFilled','CustomerServiceFilled','DashboardFilled','DatabaseFilled','DislikeFilled','DollarCircleFilled','EnvironmentFilled','EuroCircleFilled','ExperimentFilled','EyeFilled','EyeInvisibleFilled','FileAddFilled','FileExcelFilled','FileExclamationFilled','FileFilled','FileImageFilled','FileMarkdownFilled','FilePdfFilled','FilePptFilled','FileTextFilled','FileUnknownFilled','FileWordFilled','FileZipFilled','FilterFilled','FireFilled','FlagFilled','FolderAddFilled','FolderFilled','FolderOpenFilled','FormatPainterFilled','FrownFilled','FunnelPlotFilled','GiftFilled','GoldFilled','GoldenFilled','HddFilled','HeartFilled','HomeFilled','HourglassFilled','IdcardFilled','InsuranceFilled','InteractionFilled','LayoutFilled','LikeFilled','LockFilled','MacCommandFilled','MailFilled','MedicineBoxFilled','MehFilled','MessageFilled','MobileFilled','MoneyCollectFilled','NotificationFilled','PayCircleFilled','PhoneFilled','PictureFilled','PlaySquareFilled','PoundCircleFilled','PrinterFilled','ProfileFilled','ProjectFilled','PropertySafetyFilled','PushpinFilled','ReadFilled','ReconciliationFilled','RedEnvelopeFilled','RestFilled','RobotFilled','RocketFilled','SafetyCertificateFilled','SaveFilled','ScheduleFilled','SecurityScanFilled','SettingFilled','ShopFilled','ShoppingFilled','SignalFilled','SkinFilled','SmileFilled','SoundFilled','StarFilled','SwitcherFilled','TabletFilled','TagFilled','TagsFilled','ThunderboltFilled',// 品牌和标识'AndroidFilled','AppleFilled','WindowsFilled','ChromeFilled','GithubFilled','AliwangwangFilled','WeiboSquareFilled','WeiboCircleFilled','TaobaoCircleFilled','TaobaoSquareFilled','Html5Filled','WechatFilled','YoutubeFilled','AlipayCircleFilled','AlipaySquareFilled','AmazonCircleFilled','AmazonSquareFilled','BehanceCircleFilled','BehanceSquareFilled','CodepenCircleFilled','CodepenSquareFilled','CodeSandboxCircleFilled','CodeSandboxSquareFilled','DingtalkCircleFilled','DingtalkSquareFilled','DribbbleCircleFilled','DribbbleSquareFilled','DropboxCircleFilled','DropboxSquareFilled','FacebookFilled','GitlabFilled','GoogleCircleFilled','GooglePlusCircleFilled','GooglePlusSquareFilled','GoogleSquareFilled','IeCircleFilled','IeSquareFilled','InstagramFilled','LinkedinFilled','MediumCircleFilled','MediumSquareFilled','QqCircleFilled','QqSquareFilled','RedditCircleFilled','RedditSquareFilled','SketchCircleFilled','SketchSquareFilled','SkypeFilled','SlackCircleFilled','SlackSquareFilled','YahooFilled','YuqueFilled',// 双色图标'AccountBookTwoTone','AlertTwoTone','ApiTwoTone','AppstoreTwoTone','AudioTwoTone','BankTwoTone','BellTwoTone','BookTwoTone','BugTwoTone','BuildTwoTone','BulbTwoTone','CalculatorTwoTone','CalendarTwoTone','CameraTwoTone','CarTwoTone','CarryOutTwoTone','CiCircleTwoTone','CiTwoTone','CloudTwoTone','CodeTwoTone','CompassTwoTone','ContactsTwoTone','ContainerTwoTone','ControlTwoTone','CopyrightCircleTwoTone','CopyrightTwoTone','CreditCardTwoTone','CrownTwoTone','CustomerServiceTwoTone','DashboardTwoTone','DatabaseTwoTone','DislikeTwoTone','DollarCircleTwoTone','DollarTwoTone','EnvironmentTwoTone','EuroCircleTwoTone','EuroTwoTone','ExperimentTwoTone','EyeTwoTone','EyeInvisibleTwoTone','FileAddTwoTone','FileExcelTwoTone','FileExclamationTwoTone','FileTwoTone','FileImageTwoTone','FileMarkdownTwoTone','FilePdfTwoTone','FilePptTwoTone','FileTextTwoTone','FileUnknownTwoTone','FileWordTwoTone','FileZipTwoTone','FilterTwoTone','FireTwoTone','FlagTwoTone','FolderAddTwoTone','FolderTwoTone','FolderOpenTwoTone','FrownTwoTone','FunnelPlotTwoTone','GiftTwoTone','GoldTwoTone','HddTwoTone','HeartTwoTone','HomeTwoTone','HourglassTwoTone','Html5TwoTone','IdcardTwoTone','InsuranceTwoTone','InteractionTwoTone','LayoutTwoTone','LikeTwoTone','LockTwoTone','MailTwoTone','MedicineBoxTwoTone','MehTwoTone','MessageTwoTone','MobileTwoTone','MoneyCollectTwoTone','NotificationTwoTone','PhoneTwoTone','PictureTwoTone','PlaySquareTwoTone','PoundCircleTwoTone','PrinterTwoTone','ProfileTwoTone','ProjectTwoTone','PropertySafetyTwoTone','PushpinTwoTone','ReconciliationTwoTone','RedEnvelopeTwoTone','RestTwoTone','RocketTwoTone','SafetyCertificateTwoTone','SaveTwoTone','ScheduleTwoTone','SecurityScanTwoTone','SettingTwoTone','ShopTwoTone','ShoppingTwoTone','SkinTwoTone','SmileTwoTone','SoundTwoTone','StarTwoTone','SwitcherTwoTone','TabletTwoTone','TagTwoTone','TagsTwoTone','ThunderboltTwoTone','ToolTwoTone','TrademarkCircleTwoTone','TrophyTwoTone','UnlockTwoTone','UsbTwoTone','VideoCameraTwoTone','WalletTwoTone'];// 监听父组件传入的值变化watch(() => props.modelValue, (newVal) => {selectedIcon.value = newVal;});// 处理选择器值变化const handleChange = (value) => {emit('update:modelValue', value);emit('change', value);};// 获取图标的中文名称const getChineseName = (iconName) => {return iconChineseNames[iconName] || '';};// 筛选功能，支持中英文搜索const filterOption = (input, option) => {const iconName = option.value;const chineseName = getChineseName(iconName);return (iconName.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||(chineseName && chineseName.indexOf(input) >= 0));};return {selectedIcon,iconList,handleChange,getChineseName,filterOption};}
});
</script><style scoped>
.icon-selector {display: inline-block;
}.icon-item {display: flex;align-items: center;padding: 8px 0;
}.icon-preview {font-size: 18px;color: #1890ff;margin-right: 12px;width: 20px;
}.icon-text {display: flex;flex-direction: column;
}.icon-name {font-size: 14px;color: #333;
}.icon-name-cn {font-size: 14px;color: #333;
}
</style> 

4.组件导出

index.js

// 导入所有组件
import VIconSelector from './IconSelector';// 组件列表
const components = [VIconSelector
];// 定义安装方法
const install = function(app) {// 全局注册所有组件components.forEach(component => {app.component(component.name, component);});
};// 默认导出
export default {install,VIconSelector
}; 

5.main.js

import Packages from "../packages";
app.use(Packages);

6.使用

<a-form-item label="菜单图标" name="icon"><v-icon-selector v-model="sysMenus.icon" />
</a-form-item>

7.demo

<template><div class="icon-demo-container"><h1>图标选择器组件演示</h1><div class="demo-section"><h2>基本使用</h2><div class="demo-row"><v-icon-selector v-model="selectedIcon" @change="handleIconChange" /></div><div class="demo-row">当前选择的图标：{{ selectedIcon || '无' }}</div><div class="demo-row"><div v-if="selectedIcon" class="selected-icon"><component :is="selectedIcon" style="font-size: 24px; margin-right: 8px;" /><span>渲染效果</span></div></div></div><div class="demo-section"><h2>自定义宽度</h2><div class="demo-row"><v-icon-selector v-model="selectedIcon2" width="300px" /></div></div><div class="demo-section"><h2>自定义占位符</h2><div class="demo-row"><v-icon-selector v-model="selectedIcon3" placeholder="请选择一个合适的图标" /></div></div><div class="demo-section"><h2>禁用清除</h2><div class="demo-row"><v-icon-selector v-model="selectedIcon4" :allowClear="false" /></div></div><div class="demo-section"><h2>代码示例</h2><pre>
&lt;template&gt;&lt;v-icon-selector v-model="selectedIcon" @change="handleIconChange" /&gt;&lt;div v-if="selectedIcon"&gt;&lt;component :is="selectedIcon" /&gt;&lt;/div&gt;
&lt;/template&gt;&lt;script&gt;
import { defineComponent, ref } from 'vue';export default defineComponent({setup() {const selectedIcon = ref('');const handleIconChange = (value) => {console.log('图标已更改:', value);};return {selectedIcon,handleIconChange};}
});
&lt;/script&gt;</pre></div></div>
</template><script>
import { defineComponent, ref } from 'vue';export default defineComponent({name: 'icon-selector-demo',setup() {const selectedIcon = ref('');const selectedIcon2 = ref('DownOutlined');const selectedIcon3 = ref('');const selectedIcon4 = ref('UpOutlined');const handleIconChange = (value) => {console.log('图标已更改:', value);};return {selectedIcon,selectedIcon2,selectedIcon3,selectedIcon4,handleIconChange};}
});
</script><style scoped>
.icon-demo-container {padding: 20px;max-width: 800px;margin: 0 auto;
}.demo-section {margin-bottom: 30px;padding: 20px;border: 1px solid #f0f0f0;border-radius: 4px;background-color: #fff;
}.demo-row {margin-bottom: 16px;
}h1 {margin-bottom: 24px;font-size: 24px;
}h2 {margin-bottom: 16px;font-size: 18px;
}pre {background-color: #f6f8fa;padding: 16px;border-radius: 4px;overflow: auto;
}.selected-icon {display: flex;align-items: center;padding: 12px;background-color: #f9f9f9;border-radius: 4px;
}
</style>