使用avue图标选择器出现图标无法显示解决

谁借莪１个温暖的怀抱￠ 2024-04-01 15:35 73阅读 0赞

情景：使用avue组件的图标选择器既要实现可以搜索的功能，也要实现正常显示图标达到更换菜单图标的效果。

链接：[Avue][] avue的参考链接 avue版本升级为2.8.0后,图标选择器由原来的avue-select-icon变更为avue-input-icon（带图标搜索功能）

![cf58f67fa7e04844bc05d74929f136a1.png][]![57b27e8f0921410e94fb87340bbd827b.png][]

### 注意：直接引入官网的js数据可以实现搜索功能，但是无法实现菜单图标更改的需求。原因是i标签无法显示\#开头的图标。 ###

![66aad9dbe0514204a0f17d62c51acf7c.png][]

如果想在实现搜素功能的前提下实现图标展示，我这里做的修改是替换了js数据，换成element官网的icon素材。这样完全实现需求。

{
    		label: '图标',
    		list: [
    			{
    				label: '工具',
    				value: 'el-icon-s-tools',
    			},
    			{
    				label: '设置',
    				value: 'el-icon-setting',
    			},
    			{
    				label: '角色管理',
    				value: 'el-icon-user-solid',
    			},
    			{
    				label: '角色',
    				value: 'el-icon-user',
    			},
    			{
    				label: '客户',
    				value: 'el-icon-s-custom',
    			},
    			{
    				label: '电话',
    				value: 'el-icon-phone',
    			},
    			{
    				label: '电话呼叫',
    				value: 'el-icon-phone-outline',
    			},
    			{
    				label: '更多',
    				value: 'el-icon-more',
    			},
    			{
    				label: '更多1',
    				value: 'el-icon-more-outline',
    			},
    			{
    				label: '五角星',
    				value: 'el-icon-star-on',
    			},
    			{
    				label: '五角星1',
    				value: 'el-icon-star-off',
    			},
    			{
    				label: '商城',
    				value: 'el-icon-s-goods',
    			},
    			{
    				label: '商城1',
    				value: 'el-icon-goods',
    			},
    			{
    				label: '帮助',
    				value: 'el-icon-s-help',
    			},
    			{
    				label: '帮助1',
    				value: 'el-icon-help',
    			},
    			{
    				label: '减少',
    				value: 'el-icon-minus',
    			},
    			{
    				label: '添加',
    				value: 'el-icon-plus',
    			},
    			{
    				label: '检查',
    				value: 'el-icon-check',
    			},
    			{
    				label: '关闭',
    				value: 'el-icon-close',
    			},
    			{
    				label: '图片',
    				value: 'el-icon-picture',
    			},
    			{
    				label: '图片1',
    				value: 'el-icon-picture-outline',
    			},
    			{
    				label: '图片2',
    				value: 'el-icon-picture-outline-round',
    			},
    			{
    				label: '上传',
    				value: 'el-icon-upload',
    			},
    			{
    				label: '上传1',
    				value: 'el-icon-upload2',
    			},
    			{
    				label: '下载',
    				value: 'el-icon-download',
    			},
    			{
    				label: '相机',
    				value: 'el-icon-camera-solid',
    			},
    			{
    				label: '相机1',
    				value: 'el-icon-camera',
    			},
    			{
    				label: '视频',
    				value: 'el-icon-video-camera-solid',
    			},
    			{
    				label: '视频1',
    				value: 'el-icon-video-camera',
    			},
    			{
    				label: '通知',
    				value: 'el-icon-message-solid',
    			},
    			{
    				label: '通知1',
    				value: 'el-icon-bell',
    			},
    			{
    				label: '短信',
    				value: '#icon-duanxin2',
    			},
    			{
    				label: '工具箱',
    				value: 'el-icon-s-cooperation',
    			},
    			{
    				label: '操作',
    				value: 'el-icon-s-order',
    			},
    			{
    				label: '屏幕',
    				value: 'el-icon-s-platform',
    			},
    			{
    				label: '折叠',
    				value: 'el-icon-s-fold',
    			},
    			{
    				label: '折叠1',
    				value: 'el-icon-s-unfold',
    			},
    			{
    				label: '折线',
    				value: 'el-icon-s-operation',
    			},
    			{
    				label: '提升',
    				value: 'el-icon-s-promotion',
    			},
    			{
    				label: '首页',
    				value: 'el-icon-s-home',
    			},
    			{
    				label: '释放',
    				value: 'el-icon-s-release',
    			},
    			{
    				label: '优惠券',
    				value: 'el-icon-s-ticket',
    			},
    			{
    				label: '管理',
    				value: 'el-icon-s-management',
    			},
    			{
    				label: '打开',
    				value: 'el-icon-s-open',
    			},
    			{
    				label: '购物',
    				value: 'el-icon-s-shop',
    			},
    			{
    				label: '市场',
    				value: 'el-icon-s-marketing',
    			},
    			{
    				label: '目标',
    				value: 'el-icon-s-flag',
    			},
    			{
    				label: '信息',
    				value: 'el-icon-s-comment',
    			},
    			{
    				label: '金融',
    				value: 'el-icon-s-finance',
    			},
    			{
    				label: '宣布',
    				value: 'el-icon-s-claim',
    			},
    			{
    				label: '用户',
    				value: 'el-icon-s-custom',
    			},
    			{
    				label: '提示',
    				value: 'el-icon-s-opportunity',
    			},
    			{
    				label: '数据',
    				value: 'el-icon-s-data',
    			},
    			{
    				label: '质检',
    				value: 'el-icon-s-check',
    			},
    			{
    				label: '全部',
    				value: 'el-icon-menu',
    			},
    			{
    				label: '分享',
    				value: 'el-icon-share',
    			},
    			{
    				label: '播放',
    				value: 'el-icon-video-pause',
    			},
    			{
    				label: '暂停',
    				value: 'el-icon-video-play',
    			},
    			{
    				label: '刷新',
    				value: 'el-icon-refresh',
    			},
    			{
    				label: '向后',
    				value: 'el-icon-refresh-right',
    			},
    			{
    				label: '撤回',
    				value: 'el-icon-refresh-left',
    			},
    			{
    				label: '完成',
    				value: 'el-icon-finished',
    			},
    			{
    				label: '排序',
    				value: 'el-icon-sort',
    			},
    			{
    				label: '全屏',
    				value: 'el-icon-rank',
    			},
    			{
    				label: '可见',
    				value: 'el-icon-view',
    			},
    			{
    				label: '日历',
    				value: 'el-icon-date',
    			},
    			{
    				label: '标记',
    				value: 'el-icon-edit-outline',
    			},
    			{
    				label: '文件',
    				value: 'el-icon-folder',
    			},
    			{
    				label: '文件类型',
    				value: 'el-icon-folder-opened',
    			},
    			{
    				label: '文件添加',
    				value: 'el-icon-folder-add',
    			},
    			{
    				label: '文件移除',
    				value: 'el-icon-folder-remove',
    			},
    			{
    				label: '文件删除',
    				value: 'el-icon-folder-delete',
    			},
    			{
    				label: '文件质检',
    				value: 'el-icon-folder-checked',
    			},
    			{
    				label: '文件复制',
    				value: 'el-icon-document-copy',
    			},
    			{
    				label: '票据',
    				value: 'el-icon-tickets',
    			},
    			{
    				label: '打印',
    				value: 'el-icon-printer',
    			},
    			{
    				label: '回形针',
    				value: 'el-icon-paperclip',
    			},
    			{
    				label: '收纳盒',
    				value: 'el-icon-takeaway-box',
    			},
    			{
    				label: '搜索',
    				value: 'el-icon-search',
    			},
    			{
    				label: '显示屏',
    				value: 'el-icon-monitor',
    			},
    			{
    				label: '吸磁',
    				value: 'el-icon-attract',
    			},
    			{
    				label: '手机',
    				value: 'el-icon-mobile',
    			},
    			{
    				label: '剪切',
    				value: 'el-icon-scissors',
    			},
    			{
    				label: '雨伞',
    				value: 'el-icon-umbrella',
    			},
    			{
    				label: '耳机',
    				value: 'el-icon-headset',
    			},
    			{
    				label: '刷子',
    				value: 'el-icon-brush',
    			},
    			{
    				label: '鼠标',
    				value: 'el-icon-mouse',
    			},
    			{
    				label: '配合',
    				value: 'el-icon-coordinate',
    			},
    			{
    				label: 'magic',
    				value: 'el-icon-magic-stick',
    			},
    			{
    				label: '阅读',
    				value: 'el-icon-reading',
    			},
    			{
    				label: '数据线',
    				value: 'el-icon-data-line',
    			},
    			{
    				label: '饼图',
    				value: 'el-icon-pie-chart',
    			},
    			{
    				label: '收藏夹',
    				value: 'el-icon-collection-tag',
    			},
    			{
    				label: '电影',
    				value: 'el-icon-film',
    			},
    			{
    				label: '急救箱',
    				value: 'el-icon-suitcase',
    			},
    			{
    				label: '急救箱1',
    				value: 'el-icon-suitcase-1',
    			},
    			{
    				label: '收藏夹1',
    				value: 'el-icon-collection',
    			},
    			{
    				label: '笔记本',
    				value: 'el-icon-notebook-1',
    			},
    			{
    				label: '笔记本1',
    				value: 'el-icon-notebook-2',
    			},
    			{
    				label: '卷纸',
    				value: 'el-icon-toilet-paper',
    			},
    			{
    				label: '办公楼',
    				value: 'el-icon-office-building',
    			},
    			{
    				label: '学校',
    				value: 'el-icon-school',
    			},
    			{
    				label: '台灯',
    				value: 'el-icon-table-lamp',
    			},
    			{
    				label: '首页1',
    				value: 'el-icon-house',
    			},
    			{
    				label: '禁止抽烟',
    				value: 'el-icon-no-smoking',
    			},
    			{
    				label: '抽烟',
    				value: 'el-icon-smoking',
    			},
    			{
    				label: '购物车',
    				value: 'el-icon-shopping-cart-full',
    			},
    			{
    				label: '购物车1',
    				value: 'el-icon-shopping-cart-1',
    			},
    			{
    				label: '购物车2',
    				value: 'el-icon-shopping-cart-2',
    			},
    			{
    				label: '购物袋',
    				value: 'el-icon-shopping-bag-1',
    			},
    			{
    				label: '购物袋1',
    				value: 'el-icon-shopping-bag-2',
    			},
    			{
    				label: '礼物',
    				value: 'el-icon-present',
    			},
    			{
    				label: '卡',
    				value: 'el-icon-bank-card',
    			},
    			{
    				label: '金钱',
    				value: 'el-icon-money',
    			},
    			{
    				label: '数据库',
    				value: 'el-icon-coin',
    			},
    			{
    				label: '钱包',
    				value: 'el-icon-wallet',
    			},
    			{
    				label: '折扣',
    				value: 'el-icon-discount',
    			},
    			{
    				label: '折扣1',
    				value: 'el-icon-price-tag',
    			},
    			{
    				label: '新闻',
    				value: 'el-icon-news',
    			},
    			{
    				label: '指导',
    				value: 'el-icon-guide',
    			},
    			{
    				label: 'male',
    				value: 'el-icon-male',
    			},
    			{
    				label: 'female',
    				value: 'el-icon-female',
    			},
    			{
    				label: '手指',
    				value: 'el-icon-thumb',
    			},
    			{
    				label: 'cpu',
    				value: 'el-icon-cpu',
    			},
    			{
    				label: '链接',
    				value: 'el-icon-link',
    			},
    			{
    				label: '关联',
    				value: 'el-icon-connection',
    			},
    			{
    				label: '打开1',
    				value: 'el-icon-open',
    			},
    			{
    				label: '关闭',
    				value: 'el-icon-turn-off',
    			},
    			{
    				label: '聊天',
    				value: 'el-icon-chat-round',
    			},
    			{
    				label: '聊天1',
    				value: 'el-icon-chat-line-round',
    			},
    			{
    				label: '短信',
    				value: 'el-icon-chat-square',
    			},
    			{
    				label: '信息',
    				value: 'el-icon-chat-dot-round',
    			},
    			{
    				label: '信息1',
    				value: 'el-icon-chat-dot-square',
    			},
    			{
    				label: '信息2',
    				value: 'el-icon-chat-line-square',
    			},
    			{
    				label: '消息',
    				value: 'el-icon-message',
    			},
    			{
    				label: 'postcard',
    				value: 'el-icon-postcard',
    			},
    			{
    				label: '方向',
    				value: 'el-icon-position',
    			},
    			{
    				label: '静音',
    				value: 'el-icon-turn-off-microphone',
    			},
    			{
    				label: '语音',
    				value: 'el-icon-microphone',
    			},
    			{
    				label: '关闭通知',
    				value: 'el-icon-close-notification',
    			},
    			{
    				label: '帮助',
    				value: 'el-icon-bangzhu',
    			},
    			{
    				label: '时间',
    				value: 'el-icon-time',
    			},
    			{
    				label: '截取',
    				value: 'el-icon-crop',
    			},
    			{
    				label: '目标',
    				value: 'el-icon-aim',
    			},
    			{
    				label: '关机',
    				value: 'el-icon-switch-button',
    			},
    			{
    				label: '权限',
    				value: '#icon-quanxian',
    			},
    			{
    				label: '屏幕',
    				value: 'el-icon-full-screen',
    			},
    			{
    				label: 'mic',
    				value: 'el-icon-mic',
    			},
    			{
    				label: '指向盘',
    				value: 'el-icon-stopwatch',
    			},
    			{
    				label: 'medal',
    				value: 'el-icon-medal-1',
    			},
    			{
    				label: '奖章',
    				value: 'el-icon-medal',
    			},
    			{
    				label: '奖杯',
    				value: 'el-icon-trophy',
    			},
    			{
    				label: '奖杯1',
    				value: 'el-icon-trophy-1',
    			},
    			{
    				label: '医疗箱',
    				value: 'el-icon-first-aid-kit',
    			},
    			{
    				label: 'place',
    				value: 'el-icon-place',
    			},
    			{
    				label: '定位',
    				value: 'el-icon-location',
    			},
    			{
    				label: '定位1',
    				value: 'el-icon-location-outline',
    			},
    			{
    				label: '定位2',
    				value: 'el-icon-location-information',
    			},
    			{
    				label: '闹钟',
    				value: 'el-icon-alarm-clock',
    			},
    			{
    				label: 'timer',
    				value: 'el-icon-timer',
    			},
    			{
    				label: '手表',
    				value: 'el-icon-watch-1',
    			},
    			{
    				label: '手表1',
    				value: 'el-icon-watch',
    			},
    			{
    				label: '关锁',
    				value: 'el-icon-lock',
    			},
    			{
    				label: '开锁',
    				value: 'el-icon-unlock',
    			},
    			{
    				label: '钥匙',
    				value: 'el-icon-key',
    			},
    			{
    				label: '客服',
    				value: 'el-icon-service',
    			},
    			{
    				label: '自行车',
    				value: 'el-icon-bicycle',
    			},
    			{
    				label: '卡车',
    				value: 'el-icon-truck',
    			},
    			{
    				label: 'sunset',
    				value: 'el-icon-sunset',
    			},
    		],
    	},

当不想要实现搜素功能的时候可以使用avue-icon-select ，整理的js数据为

{
    		label: '阿里云图标',
    		list: [
    			'icon-quanxianguanli',
    			'icon-yonghuguanli',
    			'icon-jiaoseguanli',
    			'icon-web-icon-',
    			'icon-xitongguanli',
    			'icon-rizhiguanli',
    			'icon-navicon-zdgl',
    			'icon-weibiaoti46',
    			'icon-miyue',
    			'icon-shouji',
    			'icon-miyue',
    			'icon-denglvlingpai',
    			'icon-luyou',
    			'icon-msnui-supervise',
    			'icon-server',
    			'icon-wendang',
    			'icon-gtsquanjushiwufuwuGTS',
    			'icon-caidanguanli',
    			'icon-guanwang',
    			'icon-guanwangfangwen',
    			'icon-guiji',
    			'icon-fensiguanli',
    			'icon-gongzhonghao',
    			'icon-anniu_weixincaidanlianjie',
    			'icon-weixincaidan',
    			'icon-xiaoxiguanli',
    			'icon-zhexiantu',
    			'icon-canshu',
    			'icon-erji-zuhushouye',
    			'icon-pay6zhifu',
    			'icon-zhifuqudaoguanli',
    			'icon-dingdan',
    			'icon-tuikuan',
    			'icon-webicon14',
    			'icon-shouyintai',
    			'icon-wenjianguanli',
    			'icon-mysql',
    			'icon-shejiyukaifa-',
    			'icon-record',
    			'icon-biaodanbiaoqian',
    		],
    	},

图标为：

![da8469e396c84667a538d3450f7c4937.png][]

由于avue-icon-select 跟avue-input-icon 在网上已经官网可以查到的资料基本很少，以上是根据项目文件改的，理解存在误差，若有问题欢迎提出！

[Avue]: https://www.avuejs.com/
[cf58f67fa7e04844bc05d74929f136a1.png]: https://img-blog.csdnimg.cn/cf58f67fa7e04844bc05d74929f136a1.png
[57b27e8f0921410e94fb87340bbd827b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/46d2f8a2f94445aa820b1b418a480394.png
[66aad9dbe0514204a0f17d62c51acf7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c36d34d80e22496eaafb9b3619322a8b.png
[da8469e396c84667a538d3450f7c4937.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8e22e7dd0c704d60ad7380178fca7175.png