From d11398274a52f35ab6b839ab0a56c7b2759aa351 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Tue, 8 Nov 2022 12:05:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E5=9B=BE=E6=A0=87=20?= =?UTF-8?q?`icon`=20=E6=94=AF=E6=8C=81=E4=BD=BF=E7=94=A8=E5=9C=A8=E7=BA=BF?= =?UTF-8?q?=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ReIcon/index.ts | 2 +- src/components/ReIcon/src/hooks.ts | 6 ++++-- src/components/ReIcon/src/iconifyIconOffline.ts | 2 +- src/components/ReIcon/src/types.ts | 1 - src/views/login/components/phone.vue | 4 +--- src/views/login/components/regist.vue | 4 +--- src/views/login/components/update.vue | 4 +--- src/views/login/index.vue | 4 +--- src/views/system/dict/index.vue | 10 +++++----- 9 files changed, 15 insertions(+), 22 deletions(-) diff --git a/src/components/ReIcon/index.ts b/src/components/ReIcon/index.ts index 8fd33e64a..f77e6f4e1 100644 --- a/src/components/ReIcon/index.ts +++ b/src/components/ReIcon/index.ts @@ -3,7 +3,7 @@ import iconifyIconOnline from "./src/iconifyIconOnline"; import iconSelect from "./src/Select.vue"; import fontIcon from "./src/iconfont"; -/** 离线图标组件 */ +/** 本地图标组件 */ const IconifyIconOffline = iconifyIconOffline; /** 在线图标组件 */ const IconifyIconOnline = iconifyIconOnline; diff --git a/src/components/ReIcon/src/hooks.ts b/src/components/ReIcon/src/hooks.ts index 65c41344c..4413b5190 100644 --- a/src/components/ReIcon/src/hooks.ts +++ b/src/components/ReIcon/src/hooks.ts @@ -3,7 +3,8 @@ import { h, defineComponent, Component } from "vue"; import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index"; /** - * 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg + * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标 + * @see 点击查看文档图标篇 {@link https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/} * @param icon 必传 图标 * @param attrs 可选 iconType 属性 * @returns Component @@ -34,11 +35,12 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component { // svg return icon; } else { + // 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之 return defineComponent({ name: "Icon", render() { const IconifyIcon = - attrs && attrs["online"] ? IconifyIconOnline : IconifyIconOffline; + icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline; return h(IconifyIcon, { icon: icon, ...attrs diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts index b82c00399..7c45391de 100644 --- a/src/components/ReIcon/src/iconifyIconOffline.ts +++ b/src/components/ReIcon/src/iconifyIconOffline.ts @@ -161,7 +161,7 @@ addIcon("unExpand", UnExpand); import LocationCompany from "@iconify-icons/carbon/location-company"; addIcon("location-company", LocationCompany); -// Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html +// Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html export default defineComponent({ name: "IconifyIconOffline", components: { IconifyIcon }, diff --git a/src/components/ReIcon/src/types.ts b/src/components/ReIcon/src/types.ts index 7e3ffab35..8ae8a543c 100644 --- a/src/components/ReIcon/src/types.ts +++ b/src/components/ReIcon/src/types.ts @@ -11,7 +11,6 @@ export interface iconType { horizontalAlign?: boolean; verticalAlign?: boolean; align?: string; - online?: boolean; onLoad?: Function; includes?: Function; diff --git a/src/views/login/components/phone.vue b/src/views/login/components/phone.vue index cd993ece9..0b6cb5c0e 100644 --- a/src/views/login/components/phone.vue +++ b/src/views/login/components/phone.vue @@ -62,9 +62,7 @@ function onBack() { clearable v-model="ruleForm.verifyCode" :placeholder="t('login.smsVerifyCode')" - :prefix-icon=" - useRenderIcon('ri:shield-keyhole-line', { online: true }) - " + :prefix-icon="useRenderIcon('ri:shield-keyhole-line')" /> { clearable v-model="ruleForm.verifyCode" :placeholder="t('login.verifyCode')" - :prefix-icon=" - useRenderIcon('ri:shield-keyhole-line', { online: true }) - " + :prefix-icon="useRenderIcon('ri:shield-keyhole-line')" >