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

2021-03-05 14:06:35 +08:00 · 2021-03-05 14:06:35 +08:00 · 32be99df20
commit 32be99df20
parent c7c5bb7b94
6 changed files with 184 additions and 65 deletions
--- a/package.json
+++ b/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",
-    "vite": "^2.0.4"
+    "typescript": "^4.2.3",
+    "vite": "^2.0.5"
  }
 }
--- a/src/components/iconSelector/index.vue
+++ b/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">
-            <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 v-if="isAllOn" class="icon-selector-all">
+            <el-input v-model="fontIconSearch" placeholder="请输入内容进行搜索" size="small"></el-input>
+            <div class="icon-selector-all-tabs">
+              <div class="icon-selector-all-tabs-item" v-for="(v,k) in fontIconTabsList" :key="k"
+                @click="onFontIconTabsClick(v,k)" :class="{'icon-selector-all-tabs-active': fontIconTabsIndex === k}">
+                <div class="label">{{v.label}}</div>
+              </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-row>
+              </el-col>
+            </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),
    };
  },
--- a/src/theme/element.scss
+++ b/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;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+}
--- a/src/theme/iconSelector.scss
+++ b/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;
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/theme/index.scss
+++ b/src/theme/index.scss
@ -1,4 +1,5 @@
@import './app.scss';
@import './base.scss';
@import './element.scss';
+@import './iconSelector.scss';
@import './media/media.scss';
--- a/src/views/fun/selector/index.vue
+++ b/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>