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