From 928c61ccddebc8d2c697b86ee9bee0c207330a8c Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周二, 06 5月 2025 07:18:22 +0800
Subject: [PATCH] 222
---
HIAWms/web/src/components/IconButton/IconButton.tsx | 69 ++++++++++++++++++++++++++++++++++
1 files changed, 69 insertions(+), 0 deletions(-)
diff --git a/HIAWms/web/src/components/IconButton/IconButton.tsx b/HIAWms/web/src/components/IconButton/IconButton.tsx
new file mode 100644
index 0000000..3ddbfca
--- /dev/null
+++ b/HIAWms/web/src/components/IconButton/IconButton.tsx
@@ -0,0 +1,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 />
+ }
+ },
+})
--
Gitblit v1.9.3