'admin-21.03.04:新增图标选择器、优化图标自动载入逻辑等'

src/components/iconSelector/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="icon-selector">
+    <el-popover placement="bottom" :width="fontIconWidth" v-model:visible="fontIconVisible"
+      popper-class="icon-selector-popper">
+      <template #reference>
+        <el-input v-model="fontIcon" placeholder="请点击选择图标" clearable size="small" ref="inputWidthRef"
+          :prefix-icon="fontIconPrefix" @clear="onClearFontIcon"></el-input>
+      </template>
+      <transition name="el-zoom-in-top">
+        <div class="icon-selector-warp" v-show="fontIconVisible">
+          <div class="icon-selector-warp-title">请选择一个图标</div>
+          <el-row class="icon-selector-warp-row">
+            <el-col :xs="4" :sm="2" :md="2" :lg="2" :xl="2" v-for="(v,k) in sheetsIconList" :key="k"
+              @click="onColClick(v)">
+              <div class="icon-selector-warp-item">
+                <div class="flex-margin">
+                  <div class="icon-selector-warp-item-value">
+                    <i :class="v" class="iconfont fa"></i>
+                  </div>
+                </div>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+      </transition>
+    </el-popover>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, toRefs, reactive, onMounted, nextTick } from "vue";
+import initIconfont from "/@/utils/getStyleSheets.ts";
+import { stat } from "node:fs";
+export default {
+  name: "iconSelector",
+  props: {
+    isAllOn: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  setup(props, { emit }) {
+    console.log(props);
+    const inputWidthRef = ref();
+    const state = reactive({
+      fontIcon: "",
+      fontIconPrefix: "",
+      fontIconVisible: false,
+      fontIconWidth: 0,
+      sheetsIconList: [],
+    });
+    // 获取 input 的宽度
+    const getInputWidth = () => {
+      nextTick(() => {
+        state.fontIconWidth = inputWidthRef.value.$el.offsetWidth;
+      });
+    };
+    // 监听页面宽度改变
+    const initResize = () => {
+      window.addEventListener("resize", () => {
+        getInputWidth();
+      });
+    };
+    // 初始化数据
+    const initFontIconData = () => {
+      initIconfont.ali().then((res) => {
+        state.sheetsIconList = res;
+      });
+    };
+    // 当前项点击
+    const onColClick = (v) => {
+      state.fontIcon = v;
+      state.fontIconPrefix = `iconfont fa ${v}`;
+      state.fontIconVisible = false;
+      emit("get", state.fontIconPrefix);
+    };
+    // input 点击清除按钮时
+    const onClearFontIcon = () => {
+      state.fontIconPrefix = "";
+    };
+    // 页面加载时
+    onMounted(() => {
+      initFontIconData();
+      initResize();
+      getInputWidth();
+    });
+    return {
+      inputWidthRef,
+      onColClick,
+      onClearFontIcon,
+      ...toRefs(state),
+    };
+  },
+};
+</script>

src/theme/element.scss

@@ -957,3 +957,44 @@
   height: 100%;
   overflow: auto;
 }
+
+/* Popover 弹出框
+------------------------------- */
+.icon-selector-popper {
+  padding: 0 !important;
+  .icon-selector-warp-title {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 15px;
+  }
+  .icon-selector-warp {
+    .icon-selector-warp-row {
+      border-top: 1px solid #ebeef5;
+      border-left: 1px solid #ebeef5;
+      max-height: 260px;
+      overflow-y: auto;
+      .icon-selector-warp-item {
+        display: flex;
+        border-right: 1px solid #ebeef5;
+        border-bottom: 1px solid #ebeef5;
+        padding: 10px;
+        .icon-selector-warp-item-value {
+          transition: all 0.3s ease;
+          i {
+            font-size: 20px;
+            color: #606266;
+          }
+        }
+        &:hover {
+          cursor: pointer;
+          .icon-selector-warp-item-value {
+            i {
+              color: var(--color-primary);
+              transition: all 0.3s ease;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/utils/getStyleSheets.ts

@@ -0,0 +1,111 @@
+import { nextTick } from "vue"
+
+// 获取阿里字体图标
+const getAlicdnIconfont = () => {
+    return new Promise((resolve, reject) => {
+        nextTick(() => {
+            const styles: any = document.styleSheets
+            let sheetsList = []
+            let sheetsIconList = []
+            for (let i = 0; i < styles.length; i++) {
+                if (styles[i].href && styles[i].href.indexOf("at.alicdn.com") > -1) {
+                    sheetsList.push(styles[i])
+                }
+            }
+            for (let i = 0; i < sheetsList.length; i++) {
+                for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
+                    if (
+                        sheetsList[i].cssRules[j].selectorText &&
+                        sheetsList[i].cssRules[j].selectorText.indexOf(".icon-") > -1
+                    ) {
+                        sheetsIconList.push(
+                            `${sheetsList[i].cssRules[j].selectorText
+                                .substring(1, sheetsList[i].cssRules[j].selectorText.length)
+                                .replace(/\:\:before/gi, "")}`
+                        )
+                    }
+                }
+            }
+            if (sheetsIconList.length > 0) resolve(sheetsIconList)
+            else reject('未获取到值，请刷新重试')
+        })
+    })
+}
+
+// 初始化获取 css 样式，获取 element plus 自带图标
+const elementPlusIconfont = () => {
+    return new Promise((resolve, reject) => {
+        nextTick(() => {
+            const styles: any = document.styleSheets
+            let sheetsIconList = []
+            for (let i = 0; i < styles.length; i++) {
+                for (let j = 0; j < styles[i].cssRules.length; j++) {
+                    if (
+                        styles[i].cssRules[j].selectorText &&
+                        styles[i].cssRules[j].selectorText.indexOf(".el-icon-") === 0
+                    ) {
+                        sheetsIconList.push(
+                            `${styles[i].cssRules[j].selectorText
+                                .substring(1, styles[i].cssRules[j].selectorText.length)
+                                .replace(/\:\:before/gi, "")}`
+                        )
+                    }
+                }
+            }
+            if (sheetsIconList.length > 0) resolve(sheetsIconList)
+            else reject('未获取到值，请刷新重试')
+        })
+    })
+}
+
+// 初始化获取 css 样式，这里使用 fontawesome 的图标
+const awesomeIconfont = () => {
+    return new Promise((resolve, reject) => {
+        nextTick(() => {
+            const styles: any = document.styleSheets
+            let sheetsList = []
+            let sheetsIconList = []
+            for (let i = 0; i < styles.length; i++) {
+                if (
+                    styles[i].href &&
+                    styles[i].href.indexOf("netdna.bootstrapcdn.com") > -1
+                ) {
+                    sheetsList.push(styles[i])
+                }
+            }
+            for (let i = 0; i < sheetsList.length; i++) {
+                for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
+                    if (
+                        sheetsList[i].cssRules[j].selectorText &&
+                        sheetsList[i].cssRules[j].selectorText.indexOf(".fa-") === 0 &&
+                        sheetsList[i].cssRules[j].selectorText.indexOf(",") === -1
+                    ) {
+                        sheetsIconList.push(
+                            `${sheetsList[i].cssRules[j].selectorText
+                                .substring(1, sheetsList[i].cssRules[j].selectorText.length)
+                                .replace(/\:\:before/gi, "")}`
+                        )
+                    }
+                }
+            }
+            if (sheetsIconList.length > 0) resolve(sheetsIconList)
+            else reject('未获取到值，请刷新重试')
+        })
+    })
+}
+
+// 定义导出方法集合
+const initIconfont = {
+    ali: () => {
+        return getAlicdnIconfont()
+    },
+    ele: () => {
+        return elementPlusIconfont()
+    },
+    awe: () => {
+        return awesomeIconfont()
+    }
+}
+
+// 导出方法
+export default initIconfont

src/views/fun/selector/index.vue

@@ -1,14 +1,26 @@
 <template>
-  <div class="selector-container"></div>
+  <div class="selector-container">
+    <el-card shadow="hover" header="1、图标选择器：简单版本">
+      <IconSelector @get="ongetCurrentIcon" />
+    </el-card>
+    <el-card shadow="hover" header="2、图标选择器：高级版本" class="mt15"></el-card>
+  </div>
 </template>
 
 <script lang="ts">
 import { toRefs, reactive } from "vue";
+import IconSelector from "/@/components/iconSelector/index.vue";
 export default {
   name: "selector",
+  components: { IconSelector },
   setup() {
     const state = reactive({});
+    // 获取当前点击的 icon 图标
+    const ongetCurrentIcon = (v) => {
+      console.log(v);
+    };
     return {
+      ongetCurrentIcon,
       ...toRefs(state),
     };
   },

src/views/pages/awesome/index.vue

@@ -20,42 +20,17 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, nextTick, onMounted } from "vue";
+import { toRefs, reactive, onMounted } from "vue";
+import initIconfont from "/@/utils/getStyleSheets.ts";
 export default {
   name: "awesome",
   setup() {
     const state = reactive({
       sheetsIconList: [],
     });
-    // 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
+    // 初始化获取 css 样式，这里使用fontawesome的图标(记得加上前缀 `fa`)，其它第三方请自行做判断
     const initGetStyleSheets = () => {
-      nextTick(() => {
+      initIconfont.awe().then((res) => (state.sheetsIconList = res));
-        const styles = document.styleSheets;
-        let sheetsList = [];
-        for (let i = 0; i < styles.length; i++) {
-          if (
-            styles[i].href &&
-            styles[i].href.indexOf("netdna.bootstrapcdn.com") > -1
-          ) {
-            sheetsList.push(styles[i]);
-          }
-        }
-        for (let i = 0; i < sheetsList.length; i++) {
-          for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
-            if (
-              sheetsList[i].cssRules[j].selectorText &&
-              sheetsList[i].cssRules[j].selectorText.indexOf(".fa-") === 0 &&
-              sheetsList[i].cssRules[j].selectorText.indexOf(",") === -1
-            ) {
-              state.sheetsIconList.push(
-                `${sheetsList[i].cssRules[j].selectorText
-                  .substring(1, sheetsList[i].cssRules[j].selectorText.length)
-                  .replace(/\:\:before/gi, "")}`
-              );
-            }
-          }
-        }
-      });
     };
     // 页面加载时
     onMounted(() => {

src/views/pages/element/index.vue

@@ -20,32 +20,17 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, nextTick, onMounted } from "vue";
+import { toRefs, reactive, onMounted } from "vue";
+import initIconfont from "/@/utils/getStyleSheets.ts";
 export default {
   name: "element",
   setup() {
     const state = reactive({
       sheetsIconList: [],
     });
-    // 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
+    // 初始化获取 css 样式，获取 element plus 自带图标
     const initGetStyleSheets = () => {
-      nextTick(() => {
+      initIconfont.ele().then((res) => (state.sheetsIconList = res));
-        const styles = document.styleSheets;
-        for (let i = 0; i < styles.length; i++) {
-          for (let j = 0; j < styles[i].cssRules.length; j++) {
-            if (
-              styles[i].cssRules[j].selectorText &&
-              styles[i].cssRules[j].selectorText.indexOf(".el-icon-") === 0
-            ) {
-              state.sheetsIconList.push(
-                `${styles[i].cssRules[j].selectorText
-                  .substring(1, styles[i].cssRules[j].selectorText.length)
-                  .replace(/\:\:before/gi, "")}`
-              );
-            }
-          }
-        }
-      });
     };
     // 页面加载时
     onMounted(() => {

src/views/pages/iocnfont/index.vue

@@ -18,7 +18,8 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, nextTick, onMounted } from "vue";
+import { toRefs, reactive, onMounted } from "vue";
+import initIconfont from "/@/utils/getStyleSheets.ts";
 export default {
   name: "iconfont",
   setup() {
@@ -27,29 +28,7 @@ export default {
     });
     // 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
     const initGetStyleSheets = () => {
-      nextTick(() => {
+      initIconfont.ali().then((res) => (state.sheetsIconList = res));
-        const styles = document.styleSheets;
-        let sheetsList = [];
-        for (let i = 0; i < styles.length; i++) {
-          if (styles[i].href && styles[i].href.indexOf("at.alicdn.com") > -1) {
-            sheetsList.push(styles[i]);
-          }
-        }
-        for (let i = 0; i < sheetsList.length; i++) {
-          for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
-            if (
-              sheetsList[i].cssRules[j].selectorText &&
-              sheetsList[i].cssRules[j].selectorText.indexOf(".icon-") > -1
-            ) {
-              state.sheetsIconList.push(
-                `${sheetsList[i].cssRules[j].selectorText
-                  .substring(1, sheetsList[i].cssRules[j].selectorText.length)
-                  .replace(/\:\:before/gi, "")}`
-              );
-            }
-          }
-        }
-      });
     };
     // 页面加载时
     onMounted(() => {