'admin-21.03.03:新增字体图标自动载入界面'

src/router/index.ts

@@ -384,7 +384,7 @@ export const dynamicRoutes = [
                     name: 'filtering',
                     component: () => import('/@/views/pages/filtering/index.vue'),
                     meta: {
-                        title: '过滤筛选组件',
+                        title: '过滤筛选',
                         isLink: '',
                         isHide: false,
                         isKeepAlive: true,
@@ -394,6 +394,36 @@ export const dynamicRoutes = [
                         icon: 'el-icon-sell'
                     }
                 },
+                {
+                    path: '/pages/iocnfont',
+                    name: 'iocnfont',
+                    component: () => import('/@/views/pages/iocnfont/index.vue'),
+                    meta: {
+                        title: 'iconfont 字体图标',
+                        isLink: '',
+                        isHide: false,
+                        isKeepAlive: true,
+                        isAffix: false,
+                        isIframe: false,
+                        auth: ['admin', 'test'],
+                        icon: 'el-icon-present'
+                    }
+                },
+                {
+                    path: '/pages/element',
+                    name: 'element',
+                    component: () => import('/@/views/pages/element/index.vue'),
+                    meta: {
+                        title: 'element 字体图标',
+                        isLink: '',
+                        isHide: false,
+                        isKeepAlive: true,
+                        isAffix: false,
+                        isIframe: false,
+                        auth: ['admin', 'test'],
+                        icon: 'el-icon-platform-eleme'
+                    }
+                },
             ]
         },
         {

src/utils/setIconfont.ts

@@ -10,6 +10,7 @@ export function setCssCdn() {
         let link = document.createElement('link')
         link.rel = 'stylesheet'
         link.href = v
+        link.crossOrigin = 'anonymous'
         document.getElementsByTagName('head')[0].appendChild(link)
     })
 }

src/views/fun/countup/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card shadow="hover" header="数字滚动演示">
-      <el-alert title="感谢 `countup.js`，项目地址：https://github.com/inorganik/countUp.js" type="success" :closable="false"
+      <el-alert title="感谢优秀的 `countup.js`，项目地址：https://github.com/inorganik/countUp.js" type="success" :closable="false"
         class="mb15"></el-alert>
       <el-row :gutter="20">
         <el-col :sm="6" class="mb15" v-for="(v,k) in topCardItemList" :key="k">

src/views/pages/element/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="element-container">
+    <el-card shadow="hover" header="element 字体图标(自动载入)">
+      <el-row class="iconfont-row">
+        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v,k) in sheetsIconList" :key="k">
+          <div class="iconfont-warp">
+            <div class="flex-margin">
+              <div class="iconfont-warp-value">
+                <i :class="v" class="iconfont"></i>
+              </div>
+              <div class="iconfont-warp-label mt10">{{v}}</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, nextTick, onMounted } from "vue";
+export default {
+  name: "element",
+  setup() {
+    const state = reactive({
+      sheetsIconList: [],
+    });
+    // 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
+    const initGetStyleSheets = () => {
+      nextTick(() => {
+        const styles = document.styleSheets;
+        let sheetsList = [];
+        for (let i = 0; i < styles.length; i++) {
+          if (
+            styles[i].href &&
+            styles[i].href.indexOf("http://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(() => {
+      initGetStyleSheets();
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.element-container {
+  .iconfont-row {
+    border-top: 1px solid #ebeef5;
+    border-left: 1px solid #ebeef5;
+    .iconfont-warp {
+      text-align: center;
+      border-right: 1px solid #ebeef5;
+      border-bottom: 1px solid #ebeef5;
+      height: 120px;
+      overflow: hidden;
+      display: flex;
+      &:hover {
+        .iconfont-warp-value {
+          i {
+            color: var(--color-primary);
+            transition: all 0.3s ease;
+          }
+        }
+        .iconfont-warp-label {
+          color: var(--color-primary);
+          transition: all 0.3s ease;
+        }
+      }
+      .iconfont-warp-value {
+        i {
+          color: #606266;
+          font-size: 32px;
+          transition: all 0.3s ease;
+        }
+      }
+      .iconfont-warp-label {
+        color: #99a9bf;
+        transition: all 0.3s ease;
+      }
+    }
+  }
+}
+</style>

src/views/pages/iocnfont/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="iconfont-container">
+    <el-card shadow="hover" header="iconfont 字体图标(自动载入)">
+      <el-row class="iconfont-row">
+        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v,k) in sheetsIconList" :key="k">
+          <div class="iconfont-warp">
+            <div class="flex-margin">
+              <div class="iconfont-warp-value">
+                <i :class="v" class="iconfont"></i>
+              </div>
+              <div class="iconfont-warp-label mt10">{{v}}</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, nextTick, onMounted } from "vue";
+export default {
+  name: "iconfont",
+  setup() {
+    const state = reactive({
+      sheetsIconList: [],
+    });
+    // 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
+    const initGetStyleSheets = () => {
+      nextTick(() => {
+        const styles = document.styleSheets;
+        let sheetsList = [];
+        for (let i = 0; i < styles.length; i++) {
+          if (
+            styles[i].href &&
+            styles[i].href.indexOf("http://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(() => {
+      initGetStyleSheets();
+    });
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.iconfont-container {
+  .iconfont-row {
+    border-top: 1px solid #ebeef5;
+    border-left: 1px solid #ebeef5;
+    .iconfont-warp {
+      text-align: center;
+      border-right: 1px solid #ebeef5;
+      border-bottom: 1px solid #ebeef5;
+      height: 120px;
+      overflow: hidden;
+      display: flex;
+      &:hover {
+        .iconfont-warp-value {
+          i {
+            color: var(--color-primary);
+            transition: all 0.3s ease;
+          }
+        }
+        .iconfont-warp-label {
+          color: var(--color-primary);
+          transition: all 0.3s ease;
+        }
+      }
+      .iconfont-warp-value {
+        i {
+          color: #606266;
+          font-size: 32px;
+          transition: all 0.3s ease;
+        }
+      }
+      .iconfont-warp-label {
+        color: #99a9bf;
+        transition: all 0.3s ease;
+      }
+    }
+  }
+}
+</style>