首次提交

zhuguifei

2026-03-02 80ff784bf60637cd348ae665fc907f7b1e527dd8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<script setup lang="ts">
import { type VNode, computed, useAttrs } from 'vue';
import type { ButtonProps, PopoverPlacement } from 'naive-ui';
import { twMerge } from 'tailwind-merge';
 
defineOptions({
  name: 'ButtonIcon',
  inheritAttrs: false
});
 
interface Props {
  /** Button class */
  class?: string;
  /** Show popconfirm icon */
  showPopconfirmIcon?: boolean;
  /** Iconify icon name */
  icon?: string;
  /** Local icon name */
  localIcon?: string;
  /** Tooltip content */
  tooltipContent?: string;
  /** Tooltip placement */
  tooltipPlacement?: PopoverPlacement;
  /** Popconfirm content - can be string or VNode */
  popconfirmContent?: string | VNode;
  zIndex?: number;
  quaternary?: boolean;
  [key: string]: any;
}
 
const props = withDefaults(defineProps<Props>(), {
  class: '',
  showPopconfirmIcon: true,
  icon: '',
  localIcon: '',
  tooltipContent: '',
  tooltipPlacement: 'bottom',
  popconfirmContent: '',
  zIndex: 98,
  quaternary: true
});
 
interface Emits {
  (e: 'positiveClick'): void;
}
 
const emit = defineEmits<Emits>();
 
const DEFAULT_CLASS = 'h-[36px] text-icon';
 
const attrs: ButtonProps = useAttrs();
 
const quaternary = computed(() => {
  return !(attrs.text || attrs.dashed || attrs.ghost) && props.quaternary;
});
 
const handlePositiveClick = () => {
  emit('positiveClick');
};
</script>
 
<template>
  <NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
    <template #trigger>
      <NPopconfirm :show-icon="showPopconfirmIcon" :disabled="!popconfirmContent" @positive-click="handlePositiveClick">
        <template #default>
          <component :is="popconfirmContent" v-if="typeof popconfirmContent !== 'string'" />
          <template v-else>{{ popconfirmContent }}</template>
        </template>
        <template #trigger>
          <NButton
            :quaternary="quaternary"
            :class="twMerge(DEFAULT_CLASS, props.class)"
            :focusable="false"
            v-bind="attrs"
          >
            <div class="flex-center gap-8px">
              <slot>
                <SvgIcon v-if="icon" :icon="icon" />
                <SvgIcon v-else :local-icon="localIcon" />
              </slot>
            </div>
          </NButton>
        </template>
      </NPopconfirm>
    </template>
    {{ tooltipContent }}
  </NTooltip>
</template>
 
<style scoped></style>