'admin-21.03.05:更新最新依赖、增加图标选择器、样式优化等'

package.json

@@ -11,7 +11,7 @@
     "countup.js": "^2.0.7",
     "echarts": "^5.0.2",
     "echarts-wordcloud": "^2.0.0",
-    "element-plus": "^1.0.2-beta.32",
+    "element-plus": "^1.0.2-beta.33",
     "mitt": "^2.1.0",
     "nprogress": "^0.2.0",
     "screenfull": "^5.1.0",
@@ -27,11 +27,11 @@
     "@types/nprogress": "^0.2.0",
     "@types/sortablejs": "^1.10.6",
     "@vitejs/plugin-vue": "^1.1.5",
-    "@vue/compiler-sfc": "^3.0.6",
+    "@vue/compiler-sfc": "^3.0.7",
     "dotenv": "^8.2.0",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
-    "typescript": "^4.2.2",
+    "typescript": "^4.2.3",
-    "vite": "^2.0.4"
+    "vite": "^2.0.5"
   }
 }

src/components/iconSelector/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="icon-selector">
-    <el-popover placement="bottom" :width="fontIconWidth" v-model:visible="fontIconVisible"
+    <el-popover :placement="placement" :width="fontIconWidth" v-model:visible="fontIconVisible"
       popper-class="icon-selector-popper">
       <template #reference>
         <el-input v-model="fontIcon" placeholder="请点击选择图标" clearable size="small" ref="inputWidthRef"
@@ -9,18 +9,30 @@
       <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">
+          <div v-if="isAllOn" class="icon-selector-all">
-            <el-col :xs="4" :sm="2" :md="2" :lg="2" :xl="2" v-for="(v,k) in sheetsIconList" :key="k"
+            <el-input v-model="fontIconSearch" placeholder="请输入内容进行搜索" size="small"></el-input>
-              @click="onColClick(v)">
+            <div class="icon-selector-all-tabs">
-              <div class="icon-selector-warp-item">
+              <div class="icon-selector-all-tabs-item" v-for="(v,k) in fontIconTabsList" :key="k"
-                <div class="flex-margin">
+                @click="onFontIconTabsClick(v,k)" :class="{'icon-selector-all-tabs-active': fontIconTabsIndex === k}">
-                  <div class="icon-selector-warp-item-value">
+                <div class="label">{{v.label}}</div>
-                    <i :class="v" class="iconfont fa"></i>
+              </div>
+            </div>
+          </div>
+          <div class="icon-selector-warp-row">
+            <el-row :gutter="10">
+              <el-col :xs="4" :sm="4" :md="2" :lg="2" :xl="1" :class="`${iconShow}-col`" @click="onColClick(v,k)"
+                v-for="(v,k) in fontIconSheetsFilterList" :key="k">
+                <div class="icon-selector-warp-item" :class="{'icon-selector-active': fontIconIndex === k}">
+                  <div class="flex-margin">
+                    <div class="icon-selector-warp-item-value">
+                      <i :class="[iconShow,v]"></i>
+                    </div>
                   </div>
                 </div>
-              </div>
+              </el-col>
-            </el-col>
+            </el-row>
-          </el-row>
+            <el-empty :image-size="100" v-if="fontIconSheetsFilterList.length <= 0"></el-empty>
+          </div>
         </div>
       </transition>
     </el-popover>
@@ -28,26 +40,56 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick } from "vue";
+import { ref, toRefs, reactive, onMounted, nextTick, computed } from "vue";
 import initIconfont from "/@/utils/getStyleSheets.ts";
 import { stat } from "node:fs";
 export default {
   name: "iconSelector",
   props: {
+    // 是否开启高级功能
     isAllOn: {
       type: Boolean,
       default: () => false,
     },
+    // 出现位置
+    placement: {
+      type: String,
+      default: () => "bottom",
+    },
   },
   setup(props, { emit }) {
-    console.log(props);
     const inputWidthRef = ref();
     const state = reactive({
       fontIcon: "",
       fontIconPrefix: "",
       fontIconVisible: false,
       fontIconWidth: 0,
-      sheetsIconList: [],
+      fontIconIndex: "",
+      fontIconSearch: "",
+      fontIconTabsIndex: 0,
+      fontIconTabsList: [
+        { label: "iconfont" },
+        { label: "element" },
+        { label: "awesome" },
+      ],
+      fontIconSheetsList: [],
+      fontIconSheetsListAli: [],
+      fontIconSheetsListEle: [],
+      fontIconSheetsListAwe: [],
+    });
+    // 设置 iconShow 的动态显示
+    const iconShow = computed(() => {
+      if (state.fontIconTabsIndex === 0) return `iconfont ali`;
+      else if (state.fontIconTabsIndex === 1) return `ele`;
+      else if (state.fontIconTabsIndex === 2) return `fa awe`;
+    });
+    // 设置无数据时的空状态
+    const fontIconSheetsFilterList = computed(() => {
+      if (!state.fontIconSearch) return state.fontIconSheetsList;
+      let search = state.fontIconSearch.trim().toLowerCase();
+      return state.fontIconSheetsList.filter((item) => {
+        if (item.toLowerCase().indexOf(search) !== -1) return item;
+      });
     });
     // 获取 input 的宽度
     const getInputWidth = () => {
@@ -64,19 +106,44 @@ export default {
     // 初始化数据
     const initFontIconData = () => {
       initIconfont.ali().then((res) => {
-        state.sheetsIconList = res;
+        state.fontIconSheetsList = res;
+        state.fontIconSheetsListAli = res;
+      });
+      initIconfont.ele().then((res) => {
+        state.fontIconSheetsListEle = res;
+      });
+      initIconfont.awe().then((res) => {
+        state.fontIconSheetsListAwe = res;
       });
     };
     // 当前项点击
-    const onColClick = (v) => {
+    const onColClick = (v, k) => {
+      state.fontIconIndex = k;
       state.fontIcon = v;
-      state.fontIconPrefix = `iconfont fa ${v}`;
       state.fontIconVisible = false;
+      if (state.fontIconTabsIndex === 0)
+        state.fontIconPrefix = `iconfont ali ${v}`;
+      else if (state.fontIconTabsIndex === 1) state.fontIconPrefix = `ele ${v}`;
+      else if (state.fontIconTabsIndex === 2)
+        state.fontIconPrefix = `fa awe ${v}`;
       emit("get", state.fontIconPrefix);
     };
     // input 点击清除按钮时
     const onClearFontIcon = () => {
+      state.fontIconIndex = "";
       state.fontIconPrefix = "";
+      emit("get", state.fontIconPrefix);
+    };
+    // tabs 点击
+    const onFontIconTabsClick = (v, k) => {
+      state.fontIconTabsIndex = k;
+      if (v.label === "iconfont") {
+        state.fontIconSheetsList = state.fontIconSheetsListAli;
+      } else if (v.label === "element") {
+        state.fontIconSheetsList = state.fontIconSheetsListEle;
+      } else if (v.label === "awesome") {
+        state.fontIconSheetsList = state.fontIconSheetsListAwe;
+      }
     };
     // 页面加载时
     onMounted(() => {
@@ -86,8 +153,11 @@ export default {
     });
     return {
       inputWidthRef,
+      iconShow,
+      fontIconSheetsFilterList,
       onColClick,
       onClearFontIcon,
+      onFontIconTabsClick,
       ...toRefs(state),
     };
   },

src/theme/element.scss

@@ -956,45 +956,4 @@
   width: 100%;
   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/theme/iconSelector.scss

@@ -0,0 +1,87 @@
+/* Popover 弹出框(图标选择器)
+------------------------------- */
+.icon-selector-popper {
+  padding: 0 !important;
+  .icon-selector-warp {
+    .icon-selector-warp-title {
+      height: 40px;
+      line-height: 40px;
+      padding: 0 15px;
+    }
+    .icon-selector-warp-row {
+      max-height: 260px;
+      overflow-y: auto;
+      padding: 15px 15px 5px;
+      border-top: 1px solid #ebeef5;
+      .ele-col:nth-last-child(1),
+      .ele-col:nth-last-child(2) {
+        display: none;
+      }
+      .awe-col:nth-child(-n + 24) {
+        display: none;
+      }
+      .icon-selector-warp-item {
+        display: flex;
+        border: 1px solid #ebeef5;
+        padding: 10px;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        transition: all 0.3s ease;
+        .icon-selector-warp-item-value {
+          transition: all 0.3s ease;
+          i {
+            font-size: 20px;
+            color: #606266;
+          }
+        }
+        &:hover {
+          border: 1px solid var(--color-primary);
+          cursor: pointer;
+          transition: all 0.3s ease;
+          .icon-selector-warp-item-value {
+            i {
+              color: var(--color-primary);
+              transition: all 0.3s ease;
+            }
+          }
+        }
+      }
+      .icon-selector-active {
+        border: 1px solid var(--color-primary);
+        .icon-selector-warp-item-value {
+          i {
+            color: var(--color-primary);
+          }
+        }
+      }
+    }
+    .icon-selector-all {
+      .el-input {
+        padding: 0 15px;
+        margin-bottom: 10px;
+      }
+      &-tabs {
+        display: flex;
+        height: 30px;
+        line-height: 30px;
+        padding: 0 15px;
+        margin-bottom: 5px;
+        &-item {
+          flex: 1;
+          text-align: center;
+          cursor: pointer;
+          &:hover {
+            color: var(--color-primary);
+          }
+        }
+        &-active {
+          background: var(--color-primary);
+          border-radius: 5px;
+          .label {
+            color: #ffffff;
+          }
+        }
+      }
+    }
+  }
+}

src/theme/index.scss

@@ -1,4 +1,5 @@
 @import './app.scss';
 @import './base.scss';
 @import './element.scss';
+@import './iconSelector.scss';
 @import './media/media.scss';

src/views/fun/selector/index.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="selector-container">
-    <el-card shadow="hover" header="1、图标选择器：简单版本">
+    <el-card shadow="hover" header="1、图标选择器(宽度自动)：简单版本">
       <IconSelector @get="ongetCurrentIcon" />
     </el-card>
-    <el-card shadow="hover" header="2、图标选择器：高级版本" class="mt15"></el-card>
+    <el-card shadow="hover" header="2、图标选择器(宽度自动)：高级版本" class="mt15">
+      <IconSelector @get="ongetCurrentIcon" :isAllOn="true" />
+    </el-card>
   </div>
 </template>