Ant Design of Vue图标选择器

原创于 2025-05-23 10:55:11 发布 · 408 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

别浪呀

关注

标签

#前端 #javascript #开发语言

分类前端开发

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-select
      v-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>