From c7c5bb7b94abcd6a5121cf1e159ab7d85768b3cd Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Thu, 4 Mar 2021 21:57:25 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.03.04:=E6=96=B0=E5=A2=9E=E5=9B=BE?=
=?UTF-8?q?=E6=A0=87=E9=80=89=E6=8B=A9=E5=99=A8=E3=80=81=E4=BC=98=E5=8C=96?=
=?UTF-8?q?=E5=9B=BE=E6=A0=87=E8=87=AA=E5=8A=A8=E8=BD=BD=E5=85=A5=E9=80=BB?=
=?UTF-8?q?=E8=BE=91=E7=AD=89'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/iconSelector/index.vue | 95 ++++++++++++++++++++++
src/theme/element.scss | 41 ++++++++++
src/utils/getStyleSheets.ts | 111 ++++++++++++++++++++++++++
src/views/fun/selector/index.vue | 14 +++-
src/views/pages/awesome/index.vue | 33 +-------
src/views/pages/element/index.vue | 23 +-----
src/views/pages/iocnfont/index.vue | 27 +------
7 files changed, 271 insertions(+), 73 deletions(-)
create mode 100644 src/components/iconSelector/index.vue
create mode 100644 src/utils/getStyleSheets.ts
diff --git a/src/components/iconSelector/index.vue b/src/components/iconSelector/index.vue
new file mode 100644
index 0000000..a7911b3
--- /dev/null
+++ b/src/components/iconSelector/index.vue
@@ -0,0 +1,95 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/theme/element.scss b/src/theme/element.scss
index 248e354..82dd496 100644
--- a/src/theme/element.scss
+++ b/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;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/utils/getStyleSheets.ts b/src/utils/getStyleSheets.ts
new file mode 100644
index 0000000..6cae6b5
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/views/fun/selector/index.vue b/src/views/fun/selector/index.vue
index 7769595..eafaef4 100644
--- a/src/views/fun/selector/index.vue
+++ b/src/views/fun/selector/index.vue
@@ -1,14 +1,26 @@
-
+
+
+
+
+
+