feat: ✨ ToolTip 组件 offset 属性支持数组和对象写法 (#625)

✅ Closes: #560
Moonofweisheng · Sep 29, 2024 · 5092c5a · 5092c5a
1 parent 691a7b5
commit 5092c5a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/docs/component/tooltip.md b/docs/component/tooltip.md
@@ -157,7 +157,7 @@ const control = () => {
 | placement     | Tooltip 的出现位置                         | string         | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | bottom | -        |
 | disabled      | Tooltip 是否可用                           | boolean        | -                                                                                                                               | false  | -        |
 | visible-arrow | 是否显示 Tooltip 箭头                      | boolean        | -                                                                                                                               | true   | -        |
-| offset        | 出现位置的偏移量                           | number         | -                                                                                                                               | 0      | -        |
+| offset        | 出现位置的偏移量                           | number | number[] | {x:0, y:0}         | -                                                                                                                               | 0      | $LOWEST_VERSION$        |
 | show-close    | 是否显示 Tooltip 内部的关闭按钮            | boolean        | -                                                                                                                               | false  | -        |
 
 ## Events

diff --git a/src/uni_modules/wot-design-uni/components/composables/usePopover.ts b/src/uni_modules/wot-design-uni/components/composables/usePopover.ts
@@ -1,5 +1,5 @@
 import { getCurrentInstance, ref } from 'vue'
-import { getRect } from '../common/util'
+import { getRect, isObj } from '../common/util'
 
 export function usePopover() {
   const { proxy } = getCurrentInstance() as any
@@ -77,7 +77,7 @@ export function usePopover() {
       | 'right'
       | 'right-start'
       | 'right-end',
-    offset: number
+    offset: number | number[] | Record<'x' | 'y', number>
   ) {
     // arrow size
     const arrowSize = 9
@@ -90,8 +90,20 @@ export function usePopover() {
     // 左右位（横轴）对应的距离底部的距离
     const horizontalY = height.value / 2
 
-    const offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
-    const offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
+    let offsetX = 0
+    let offsetY = 0
+    if (Array.isArray(offset)) {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset[0]
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + (offset[1] ? offset[1] : offset[0])
+    } else if (isObj(offset)) {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset.x
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset.y
+    } else {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
+    }
+    // const offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
+    // const offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
 
     const placements = new Map([
       // 上

diff --git a/src/uni_modules/wot-design-uni/components/wd-tooltip/types.ts b/src/uni_modules/wot-design-uni/components/wd-tooltip/types.ts
@@ -59,7 +59,12 @@ export const tooltipProps = {
    * 类型：number
    * 默认值：0
    */
-  offset: makeNumberProp(0),
+  // offset: makeNumberProp(0),
+  offset: {
+    // 需要支持数字、数组、对象类型
+    type: [Number, Array, Object] as PropType<number | Array<number> | Record<'x' | 'y', number>>,
+    default: 0
+  },
 
   /**
    * 是否使用slot来传入content内容