2222

schangxiang@126.com

2025-05-20 cd8356ffd97d25981287d7e075cef498f7e6da58

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
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 VITE_STATIC_URL = process.env.VITE_STATIC_URL || ''
 
    let status = attrs.status === undefined ? true : attrs.status
    let isAdd = attrs.status === 'add'
    const imgUrl = () => {
      let baseDir = 'images'
      let name = imgName.value
      if (imgName.value) {
        if (imgName.value.includes('files/')) {
          baseDir = 'files'
          name = imgName.value.split('/')[1]
        }
      }
 
      return `${VITE_STATIC_URL}/resources/assets/${baseDir}/${name}.png`
    }
    const BtnRender = () => {
      return (
        <el-button
          {...attrs}
          type={props.type}
          text
          class={{
            [styles.btn]: true,
            [styles.status]: attrs.disabled ? false : status,
          }}
          onClick={(evt: Event) => emit('click', evt)}
        >
          {imgName.value ? <img src={imgUrl()} class={styles.img} /> : null}
          <span style={props.type === 'primary' ? { color: '#5a84ff' } : {}}>
            {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: '10px',
          }}
          trigger="click"
          vSlots={{
            reference: BtnRender,
          }}
        >
          {slots.default?.()}
        </el-popover>
      )
    }
    return () => {
      if (slots.content) {
        return (
          <span>
            <Popover>{slots.content && slots.content()}</Popover>
          </span>
        )
      }
      return BtnRender()
    }
  },
})