22

schangxiang@126.com

2025-04-29 3fdd40af6a7c4ca1b9c833fd7fbe17a9bcc9258f

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
import styles from './IconButton.module.scss'
import { defineComponent, SetupContext, computed } from 'vue'
 
interface IconButtonProps {
  icon?: string
  type?: string
  popoverWidth?: number
  isPopover?: boolean
  [key: string]: any
}
 
export default defineComponent<IconButtonProps>({
  // @ts-ignore
  props: ['icon', 'type', 'popoverWidth', 'isPopover'],
  name: '图标按钮',
  emits: ['click'],
  setup(props: IconButtonProps, { attrs, slots, emit }: SetupContext) {
    const imgName = computed(() => props.icon)
    const imgUrl = () =>
      new URL(`../../assets/images/${imgName.value}.png`, import.meta.url).href
    const BtnRender = () => {
      return (
        <el-button
          {...attrs}
          type={props.type}
          text
          class={styles.btn}
          onClick={(evt: Event) => emit('click', evt)}
        >
          {imgName.value ? <img src={imgUrl()} class={styles.img} /> : null}
          <span style={props.type === 'primary' ? { color: '#5a84ff' } : {}}>
            {slots.default && slots.default()}
          </span>
        </el-button>
      )
    }
    const Popover = ($props: any, { slots }: any) => {
      return (
        <el-popover
          placement="bottom-start"
          width={props.popoverWidth || 212}
          show-arrow={false}
          popper-class={styles.popover}
          persistent={false}
          popper-style={{
            marginTop: '-7px',
            padding: '8px',
          }}
          trigger="click"
          vSlots={{
            reference: BtnRender,
          }}
        >
          {slots.default && slots.default()}
        </el-popover>
      )
    }
    return () => {
      if (slots.content) {
        return (
          <span>
            <Popover>{slots.content && slots.content()}</Popover>
          </span>
        )
      }
      return <BtnRender />
    }
  },
})