cl-icon-select

说明

使用 vue3 + element-plus 封装的图标选择组件

• 支持 element-plus 所有图标（若有遗漏可提醒作者添加）
• 支持预览所选图标
• 图标回显时支持自动定位到对应位置
• 支持随意拓展 iconfont 的 Symbol 图标（可选择有色图标）

使用方法

使用前提

1. 该组件是基于 element-plus 二次封装，所以请先确保安装了 element-plus
2. 该组件默认内置 element-plus 图标，请确保已执行npm install @element-plus/icons-vue，图标无需导入，组件内部已自动将所有 element-plus 的图标导入并进行全局注册。

1.安装组件

npm i cl-icon-select

2.引入组件

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
// 引入依赖
import ClIconSelect from "cl-iocn-select";

const app = createApp(App);
app.use(ElementPlus);
// 组件注册，包含cl-icon-select和cl-icon两个组件
app.use(ClIconSelect);
app.mount("#app");

3.开始使用

3.1 基础使用

<template>
  <ClIconSelect style="width: 400px" v-model="val"></ClIconSelect>
</template>

<script setup>
  import { ref } from "vue";
  const val = ref();
</script>

3.2 拓展 iconFont 的 Symbol 图标

3.2.1 使用在线地址配置 （无需多余配置，操作简单，但是 iconfont 平台不承诺服务的稳定性，建议企业客户需下载字体包自行发布使用并做好备份。）

• 先在 iconfont 里面将需要的图标加入到我的项目

• 在配置里添加线上地址

app.use(ClIconSelect, {
  placeholder: "您可以选择图标了",
  useIconMethod: "additional",
  iconFontUrl: "//at.alicdn.com/t/c/font_4966497_p29k2604a2e.js",
  customIconList: [
    {
      type: "blibli图标",
      list: [
        "icon-xiaojuchang",
        "icon-zhibo",
        "icon-yule",
        "icon-youxi",
        "icon-yinle",
        "icon-zhuanlan",
        "icon-yingshi",
        "icon-zixun",
        "icon-zhishi",
      ],
    },
  ],
});

3.2.2 引入图标 js 文件到 main.js 里（需要下载字体包进行导入，操作复杂但是最稳定）

• 先在 iconfont 里面将需要的图标加入到我的项目
• 下载获取 Symbol 格式的图标的文件，只需要里面的 js 文件即可
• 在 main.js 中引入 js 文件

  import "./assets/iconfont/iconfont.js";

• 在 main.js 的组件配置项设置自己使用图标的方式以及图标的列表（这里我使用的 additional：在原 element-plus 的基础上添加自定义的图标列表）

  app.use(ClIconSelect, {
    placeholder: "您可以选择图标了",
    useIconMethod: "additional",
    customIconList: [
      {
        type: "blibli图标",
        list: [
          "icon-xiaojuchang",
          "icon-zhibo",
          "icon-yule",
          "icon-youxi",
          "icon-yinle",
          "icon-zhuanlan",
          "icon-yingshi",
          "icon-zixun",
          "icon-zhishi",
        ],
      },
    ],
  });

• 最终效果

Props 属性

| 属性名 | 类型 | 默认值 | 说明 | | --------------- | -------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | placeholder | String | '请选择图标' | 输入框的提示文字 | | activeColor | String | '#409eff' | 选中图标的图标颜色和边框颜色（注意如果是原本就有颜色的 Symbol 图标只会设置边框颜色） | | iconSize | Number | 20 | 下拉选项里的图标大小 | | maxHeight | String | '500px' | 图标列表的最大高度 | | iconShow | Boolean | true | 是否展示选中边框 | | useIconMethod | String | 'elementPlus' | 使用图标的方式（elementPlus：使用 element-plus 的图标；custom：使用自定义的图标列表，会使用 customIconList 字段，additional：在原 element-plus 的基础上添加自定义的图标列表） | | customIconList | Array | iconType[] | 自定义图标列表 | | autoClose | Boolean | true | 选中图标是否自动关闭 | | beforeClose | Function | (done) => {} | 如果autoClose为 false，则点击后出发该函数，可调用 done 关闭 | | beforeGetIcon | Function | (iconList) => newIconList | 获取图标前的钩子函数，可以在这里对图标进行过滤，新增等操作，最后需要返回新的图标列表 | | iconFontUrl | String | '' | 可以进行 iocnfont 的 symbol 图标线上地址的配置，使用该配置就无需在 mian.js 中引入字体的 js 文件了 | | loadIconUrlOk | Function | null | 引用线上字体成功的回调 | | loadIconUrlFail | Function | null | 引用线上字体失败的回调 |

iconType 对象

| 属性名 | 类型 | 默认值 | 说明 | | ------ | -------- | ------ | ------------ | | type | String | - | 图标类型名称 | | list | String[] | - | 图标集合 |

方法列表

| 方法名 | 说明 | 参数 | | ----------- | ------------------ | -------------- | | tab-change | 图标类型切换时触发 | name：类型名称 | | icon-change | 图标修改时触发 | icon：图标名称 |

cl-icon

说明

为了支持可以对 iconfont 的 Symbol 图标的拓展，所以单独封装了图标展示组件，原 elementPlus 图标和 iconfont 的 Symbol 图标都可使用该组件展示。

• 支持回显 iconfont 的 Symbol 图标和 elementPlus 图标

Props 属性

| 属性名 | 类型 | 默认值 | 说明 | | ---------------- | ------ | ------ | --------------------------------------------------------------------------------------------------------------- | | size | Number | 20 | 图标大小 | | color | String | 'grey' | 图标颜色（iconfont 的 Symbol 图标颜色修改需要在下载的 symbol 图标的 js 文件里面将下载图标的对应 fill 属性删除） | | componentName | Number | 20 | 图标名称 | | iconSymbolPrefix | String | 'icon' | iconfont 的 Symbol 图标前缀，由此区分是否是 iconfont 的 Symbol 图标 |

iconfont 的 Symbol 图标前缀可以在 iconfont 上，我的项目里面选择项目设置可以进行批量对图标前缀的修改，记得同步修改 iconSymbolPrefix 值