feat: 菜单离线图标(未完成)

This commit is contained in:
dap 2024-11-06 17:57:25 +08:00
parent 272777f84f
commit cce6117157
6 changed files with 69 additions and 4 deletions

View File

@ -99,7 +99,7 @@ onBeforeUnmount(() => {
>
<template #trigger>
<div :class="[nsMenu.be('tooltip', 'trigger')]">
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback />
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" offline />
<slot></slot>
<span v-if="collapseShowTitle" :class="nsMenu.e('name')">
<slot name="title"></slot>
@ -114,7 +114,7 @@ onBeforeUnmount(() => {
class="right-2"
v-bind="props"
/>
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" />
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" offline />
<slot></slot>
<slot name="title"></slot>
</div>

View File

@ -87,6 +87,7 @@ const iconArrowStyle = computed(() => {
:class="nsMenu.e('icon')"
:icon="icon"
fallback
offline
/>
<div v-if="!hiddenTitle" :class="[e('title')]">

View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { type Component, computed } from 'vue';
import { IconDefault, IconifyIcon } from '@vben-core/icons';
import { IconDefault, IconifyIcon, IconifyOfflineIcon } from '@vben-core/icons';
import {
isFunction,
isHttpUrl,
@ -13,6 +13,7 @@ const props = defineProps<{
//
fallback?: boolean;
icon?: Component | Function | string;
offline?: boolean;
}>();
const isRemoteIcon = computed(() => {
@ -28,6 +29,15 @@ const isComponent = computed(() => {
<template>
<component :is="icon as Component" v-if="isComponent" v-bind="$attrs" />
<img v-else-if="isRemoteIcon" :src="icon as string" v-bind="$attrs" />
<IconifyIcon v-else-if="icon" v-bind="$attrs" :icon="icon as string" />
<IconifyOfflineIcon
v-else-if="icon && offline"
v-bind="$attrs"
:icon="icon as string"
/>
<IconifyIcon
v-else-if="icon && !offline"
v-bind="$attrs"
:icon="icon as string"
/>
<IconDefault v-else-if="fallback" v-bind="$attrs" />
</template>

View File

@ -22,17 +22,29 @@
"devDependencies": {
"@iconify/icons-ant-design": "^1.2.7",
"@iconify/icons-arcticons": "^1.2.77",
"@iconify/icons-bi": "^1.2.19",
"@iconify/icons-bx": "^1.2.6",
"@iconify/icons-devicon": "^1.2.17",
"@iconify/icons-eos-icons": "^1.2.6",
"@iconify/icons-fa-brands": "^1.2.4",
"@iconify/icons-fe": "^1.2.5",
"@iconify/icons-flat-color-icons": "^1.2.5",
"@iconify/icons-fluent": "^1.2.38",
"@iconify/icons-fluent-mdl2": "^1.2.1",
"@iconify/icons-ic": "^1.2.13",
"@iconify/icons-icon-park-outline": "^1.2.11",
"@iconify/icons-icon-park-twotone": "^1.2.8",
"@iconify/icons-la": "^1.2.3",
"@iconify/icons-logos": "^1.2.36",
"@iconify/icons-majesticons": "^1.2.6",
"@iconify/icons-material-symbols": "^1.2.58",
"@iconify/icons-mdi": "^1.2.48",
"@iconify/icons-mingcute": "^1.2.9",
"@iconify/icons-ph": "^1.2.5",
"@iconify/icons-ri": "^1.2.10",
"@iconify/icons-simple-icons": "^1.2.74",
"@iconify/icons-solar": "^1.2.3",
"@iconify/icons-streamline": "^1.2.3",
"@iconify/icons-uiw": "^1.2.6",
"@iconify/icons-vscode-icons": "^1.2.29",
"@iconify/icons-wpf": "^1.2.3"

View File

@ -31,6 +31,8 @@ import githubOAuthIcon from '@iconify/icons-uiw/github';
import excelIcon from '@iconify/icons-vscode-icons/file-type-excel';
import osxIcon from '@iconify/icons-wpf/macos';
import './other';
// 用户 下拉菜单
export const GitHubOutlined = createIconifyOfflineIcon(
'ant-design:github-outlined',

View File

@ -0,0 +1,40 @@
import { addOfflineIcon } from '@vben-core/icons';
import Operation from '@iconify/icons-arcticons/one-hand-operation';
import BaseLineHousesFill from '@iconify/icons-bi/houses-fill';
import BxPackage from '@iconify/icons-bx/package';
import RoleBindingOutlined from '@iconify/icons-eos-icons/role-binding-outlined';
import SystemGroup from '@iconify/icons-eos-icons/system-group';
import NoticePush from '@iconify/icons-fe/notice-push';
import Dictionary from '@iconify/icons-fluent-mdl2/dictionary';
import BaseLineHouse from '@iconify/icons-ic/baseline-house';
import MenuSharp from '@iconify/icons-ic/sharp-menu';
import Appointment from '@iconify/icons-icon-park-outline/appointment';
import SettingTwo from '@iconify/icons-icon-park-twotone/setting-two';
import LogoDevOutline from '@iconify/icons-material-symbols/logo-dev-outline';
import DepartmentLine from '@iconify/icons-mingcute/department-line';
import UserDuotone from '@iconify/icons-ph/user-duotone';
import Authy from '@iconify/icons-simple-icons/authy';
import FolderWithFilesOutline from '@iconify/icons-solar/folder-with-files-outline';
import InterfaceLoginDialPadFingerPasswordDialPadDotFinger from '@iconify/icons-streamline/interface-login-dial-pad-finger-password-dial-pad-dot-finger';
addOfflineIcon('eos-icons:system-group', SystemGroup);
addOfflineIcon('ph:user-duotone', UserDuotone);
addOfflineIcon('eos-icons:role-binding-outlined', RoleBindingOutlined);
addOfflineIcon('ic:sharp-menu', MenuSharp);
addOfflineIcon('mingcute:department-line', DepartmentLine);
addOfflineIcon('icon-park-outline:appointment', Appointment);
addOfflineIcon('fluent-mdl2:dictionary', Dictionary);
addOfflineIcon('icon-park-twotone:setting-two', SettingTwo);
addOfflineIcon('fe:notice-push', NoticePush);
addOfflineIcon('material-symbols:logo-dev-outline', LogoDevOutline);
addOfflineIcon('arcticons:one-hand-operation', Operation);
addOfflineIcon(
'streamline:interface-login-dial-pad-finger-password-dial-pad-dot-finger',
InterfaceLoginDialPadFingerPasswordDialPadDotFinger,
);
addOfflineIcon('solar:folder-with-files-outline', FolderWithFilesOutline);
addOfflineIcon('simple-icons:authy', Authy);
addOfflineIcon('ic:baseline-house', BaseLineHouse);
addOfflineIcon('bi:houses-fill', BaseLineHousesFill);
addOfflineIcon('bx:package', BxPackage);