admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-07 17:48:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
✅ Closes: #560
This commit is contained in:
RYGRIT 2024-09-29 20:48:32 +08:00 committed by GitHub
parent 691a7b5772
commit 5092c5a654
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/component/tooltip.md
View File

@ -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 | - | | 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 | - | | disabled | Tooltip 是否可用 | boolean | - | false | - |
| visible-arrow | 是否显示 Tooltip 箭头 | boolean | - | true | - | | visible-arrow | 是否显示 Tooltip 箭头 | boolean | - | true | - |
| offset | 出现位置的偏移量 | number | - | 0 | - | | offset | 出现位置的偏移量 | number | number[] | {x:0, y:0} | - | 0 | $LOWEST_VERSION$ |
| show-close | 是否显示 Tooltip 内部的关闭按钮 | boolean | - | false | - | | show-close | 是否显示 Tooltip 内部的关闭按钮 | boolean | - | false | - |
## Events ## Events

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

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

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

@ -59,7 +59,12 @@ export const tooltipProps = {
* 类型：number * 类型：number
* 默认值：0 * 默认值：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内容 * 是否使用slot来传入content内容