chore: 更新离线图标方案

This commit is contained in:
dap
2024-11-07 19:00:35 +08:00
parent 980a9639b8
commit be78a07b01
7 changed files with 62 additions and 145 deletions

View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { type Component, computed } from 'vue';
import { IconDefault, IconifyIcon, IconifyOfflineIcon } from '@vben-core/icons';
import { IconDefault, IconifyIcon } from '@vben-core/icons';
import {
isFunction,
isHttpUrl,
@@ -23,37 +23,11 @@ const isComponent = computed(() => {
const { icon } = props;
return !isString(icon) && (isObject(icon) || isFunction(icon));
});
/**
* 判断图标是否为离线图标
* 主要是判断后缀是否为 |offline
*/
const offlineIcon = computed(() => {
if (
isString(props.icon) &&
!isHttpUrl(props.icon) &&
props.icon.endsWith('|offline')
) {
return {
confirm: true,
icon: props.icon.replace('|offline', ''),
};
}
return {
confirm: false,
icon: '',
};
});
</script>
<template>
<component :is="icon as Component" v-if="isComponent" v-bind="$attrs" />
<img v-else-if="isRemoteIcon" :src="icon as string" v-bind="$attrs" />
<IconifyOfflineIcon
v-else-if="offlineIcon.confirm"
v-bind="$attrs"
:icon="offlineIcon.icon"
/>
<IconifyIcon v-else-if="icon" v-bind="$attrs" :icon="icon as string" />
<IconDefault v-else-if="fallback" v-bind="$attrs" />
</template>