图标选择 - EleIconSelect

5.25.1.快速使用
图标选择组件支持自定义图标数据及图标渲染方式，使用示例：

运行代码 新窗口打开
5.25.2.属性列表
图标的数据格式需要为：
const data = [
{
title: '线框风格', // 标题
children: [ // 子级
{
title: 'System', // 子级标题
icons: ['CircleCheck', 'CircleClose'] // 子级图标
// 最多就到这一级, 这一级必须是 icons 不能有 children
},
{
title: 'Arrow',
icons: ['ArrowLeft', 'ArrowUp']
}
],
// 这一级可以为 children 也可以为 icons , 但只能同时有一个
//icons: ['CircleCheck', 'CircleClose'] // 图标
},
{
title: '实底风格',
children: [
{
title: 'System',
icons: ['CircleCheckFilled', 'CircleCloseFilled']
},
{
title: 'Arrow',
icons: ['CaretLeft', 'CaretTop']
}
]
}
];

// 还可以直接为 string 数组
const data = ['CircleCheck', 'CircleClose'];
  图标选择器会根据数据格式的不同展示不同的布局效果，数据中第一级的 title 是显示在顶部的 Tab 中， 第二级(第一级的 children)的 title 是显示在左侧的 Menu 中，如果第一级下面直接是 icons 不是 children 就不会有左侧的 Menu ， icons 就是显示在网格中的图标，如果数据直接为 string 数组就不会显示顶部的 Tab 和左侧的 Menu 。
属性 responsive 开启后在移动端小屏幕会限制下拉框不可超出屏幕，会减少图标网格的列数。
5.25.3.事件列表
5.25.4.插槽列表
icon 是图标名字，prefix 在渲染选择后的输入框前缀图标时为 true，实现渲染图片的例子：

然后将图片放在 public 目录下即可， CircleCheck.png、CircleClose.png、ArrowLeft.png 等。
5.25.5.公共图标选择
在 src/components/IconSelect 中是二次封装的公共图标选择的组件(v1.3.0新增)，使用示例：

运行代码 新窗口打开
  二次封装后使用更方便，无需设置图标的数据，已在组件内部设置好，二次封装的组件为了图标使用方便在 main.js 中对图标进行了全局安装， 为了避免全局安装的图标组件名存在冲突，全局安装时对所有图标组件的名称都加了固定的前缀， @element-plus/icons-vue 的图标都加的是 IconEl 前缀，EleAdminPlus 扩展的图标都加的是 IconPro 前缀， 图标全局安装后在使用图标的地方也无需引入图标组件，使用会更加的方便，但是注意图标组件的名称别写错了，要记得带上前缀，使用示例：
运行代码 新窗口打开