64 lines
1.4 KiB
JavaScript
64 lines
1.4 KiB
JavaScript
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 地图 Tooltip 状态管理
|
|||
|
|
* 用于显示地图标记点的轻量级信息提示框
|
|||
|
|
*/
|
|||
|
|
export function useMapTooltip() {
|
|||
|
|
// Tooltip 状态
|
|||
|
|
const tooltipState = ref({
|
|||
|
|
visible: false,
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
title: '',
|
|||
|
|
icon: '',
|
|||
|
|
zIndex: 20,
|
|||
|
|
data: null // 业务数据，用于内容插槽渲染
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 显示 Tooltip
|
|||
|
|
* @param {Object} options - Tooltip 配置选项
|
|||
|
|
* @param {number} options.x - 屏幕 X 坐标（像素）
|
|||
|
|
* @param {number} options.y - 屏幕 Y 坐标（像素）
|
|||
|
|
* @param {string} [options.title=''] - Tooltip 标题文本
|
|||
|
|
* @param {string} [options.icon=''] - 标题左侧图标的图片路径
|
|||
|
|
* @param {Object} [options.data=null] - 业务数据
|
|||
|
|
*/
|
|||
|
|
const showTooltip = ({ x, y, title = '', icon = '', data = null }) => {
|
|||
|
|
tooltipState.value = {
|
|||
|
|
visible: true,
|
|||
|
|
x,
|
|||
|
|
y,
|
|||
|
|
title,
|
|||
|
|
icon,
|
|||
|
|
zIndex: 20,
|
|||
|
|
data
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 隐藏 Tooltip
|
|||
|
|
*/
|
|||
|
|
const hideTooltip = () => {
|
|||
|
|
tooltipState.value.visible = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 更新 Tooltip 位置
|
|||
|
|
* @param {number} x - 屏幕 X 坐标
|
|||
|
|
* @param {number} y - 屏幕 Y 坐标
|
|||
|
|
*/
|
|||
|
|
const updateTooltipPosition = (x, y) => {
|
|||
|
|
tooltipState.value.x = x
|
|||
|
|
tooltipState.value.y = y
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
tooltipState,
|
|||
|
|
showTooltip,
|
|||
|
|
hideTooltip,
|
|||
|
|
updateTooltipPosition
|
|||
|
|
}
|
|||
|
|
}
|