jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

optimize (components): ButtonIcon with smarter class merging and tippy (#463)

Browse Source
This commit is contained in:
KC
2024-06-01 10:53:08 +02:00
committed by GitHub
parent f1850416c8
commit 3ad438984e
3 changed files with 22 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue';
import { createReusableTemplate } from '@vueuse/core';
import type { PopoverPlacement } from 'naive-ui';
import { twMerge } from 'tailwind-merge';
defineOptions({
name: 'ButtonIcon',
@ -21,60 +20,29 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
class: 'h-36px text-icon',
class: '',
icon: '',
tooltipContent: '',
tooltipPlacement: 'bottom',
zIndex: 98
});
interface ButtonProps {
className: string;
}
const [DefineButton, Button] = createReusableTemplate<ButtonProps>();
const cls = computed(() => {
let clsStr = props.class;
if (!clsStr.includes('h-')) {
clsStr += ' h-36px';
}
if (!clsStr.includes('text-')) {
clsStr += ' text-icon';
}
return clsStr;
});
const DEFAULT_CLASS = 'h-[36px] text-icon';
</script>
<template>
<!-- define component start: Button -->
<DefineButton v-slot="{ $slots, className }">
<NButton quaternary :class="className">
<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 :class-name="cls" v-bind="$attrs">
<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 :class-name="cls" v-bind="$attrs">
<slot>
<SvgIcon :icon="icon" />
</slot>
</Button>
</template>
<style scoped></style>