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')" >