Skip to content

Commit 5092c5a

Browse files
authored
feat: ✨ ToolTip 组件 offset 属性支持数组和对象写法 (#625)
Closes: #560
1 parent 691a7b5 commit 5092c5a

File tree

3 files changed

+23
-6
lines changed

3 files changed

+23
-6
lines changed

docs/component/tooltip.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ const control = () => {
157157
| placement | Tooltip 的出现位置 | string | top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | bottom | - |
158158
| disabled | Tooltip 是否可用 | boolean | - | false | - |
159159
| visible-arrow | 是否显示 Tooltip 箭头 | boolean | - | true | - |
160-
| offset | 出现位置的偏移量 | number | - | 0 | - |
160+
| offset | 出现位置的偏移量 | number | number[] | {x:0, y:0} | - | 0 | $LOWEST_VERSION$ |
161161
| show-close | 是否显示 Tooltip 内部的关闭按钮 | boolean | - | false | - |
162162

163163
## Events

src/uni_modules/wot-design-uni/components/composables/usePopover.ts

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { getCurrentInstance, ref } from 'vue'
2-
import { getRect } from '../common/util'
2+
import { getRect, isObj } from '../common/util'
33

44
export function usePopover() {
55
const { proxy } = getCurrentInstance() as any
@@ -77,7 +77,7 @@ export function usePopover() {
7777
| 'right'
7878
| 'right-start'
7979
| 'right-end',
80-
offset: number
80+
offset: number | number[] | Record<'x' | 'y', number>
8181
) {
8282
// arrow size
8383
const arrowSize = 9
@@ -90,8 +90,20 @@ export function usePopover() {
9090
// 左右位(横轴)对应的距离底部的距离
9191
const horizontalY = height.value / 2
9292

93-
const offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
94-
const offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
93+
let offsetX = 0
94+
let offsetY = 0
95+
if (Array.isArray(offset)) {
96+
offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset[0]
97+
offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + (offset[1] ? offset[1] : offset[0])
98+
} else if (isObj(offset)) {
99+
offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset.x
100+
offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset.y
101+
} else {
102+
offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
103+
offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
104+
}
105+
// const offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
106+
// const offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
95107

96108
const placements = new Map([
97109
// 上

src/uni_modules/wot-design-uni/components/wd-tooltip/types.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,12 @@ export const tooltipProps = {
5959
* 类型:number
6060
* 默认值:0
6161
*/
62-
offset: makeNumberProp(0),
62+
// offset: makeNumberProp(0),
63+
offset: {
64+
// 需要支持数字、数组、对象类型
65+
type: [Number, Array, Object] as PropType<number | Array<number> | Record<'x' | 'y', number>>,
66+
default: 0
67+
},
6368

6469
/**
6570
* 是否使用slot来传入content内容

0 commit comments

Comments
 (0)