xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-29 22:56:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

optimize(components): use disabled property for none tippy button

Browse Source
This commit is contained in:
orangelckc 2024-05-31 22:39:31 +02:00
parent d965142579
commit 41fc5b6e01
No known key found for this signature in database
GPG Key ID: ABA70086FAC6334C
1 changed files with 8 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/custom/button-icon.vue
View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import { createReusableTemplate } from '@vueuse/core';
import type { PopoverPlacement } from 'naive-ui';
import { twMerge } from 'tailwind-merge';
@ -28,37 +27,22 @@ const props = withDefaults(defineProps<Props>(), {
zIndex: 98
});
const [DefineButton, Button] = createReusableTemplate();
const DEFAULT_CLASS = 'h-[36px] text-icon';
</script>
<template>
<!-- define component start: Button -->
<DefineButton v-slot="{ $slots }">
<NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
<div class="flex-center gap-8px">
<component :is="$slots.default" />
</div>
</NButton>
</DefineButton>
<!-- define component end: Button -->
<NTooltip v-if="tooltipContent" :placement="tooltipPlacement" :z-index="zIndex">
<NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
<template #trigger>
<Button>
<slot>
<SvgIcon :icon="icon" />
</slot>
</Button>
<NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
<div class="flex-center gap-8px">
<slot>
<SvgIcon :icon="icon" />
</slot>
</div>
</NButton>
</template>
{{ tooltipContent }}
</NTooltip>
<Button v-else>
<slot>
<SvgIcon :icon="icon" />
</slot>
</Button>
</template>
<style scoped></style>