Vue.js 显示弹出框工具函数

/**
 * 根据点击位置智能定位弹窗
 * @param {Vue} THIS - 当前 Vue 实例
 * @param {HTMLElement} clickElement - 点击的元素
 * @param {HTMLElement} popupElement - 弹窗元素（已显示）
 * @param {string} type - 弹出方位，可选：top / bottom / left / right / top-left / top-right / bottom-left / bottom-right
 */
export function popup(THIS, clickElement, popupElement, type = '') {
    THIS.$nextTick(() => {
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;

        const clickRect = clickElement.getBoundingClientRect();
        const popupWidth = popupElement.offsetWidth;
        const popupHeight = popupElement.offsetHeight;

        let top = 0, left = 0;
        popupElement.style.position = 'fixed';

        // --- 基础位置计算 ---
        const centerX = clickRect.left + clickRect.width / 2;
        const centerY = clickRect.top + clickRect.height / 2;

        const preferred = type || 'auto';

        // --- 判断上下方向 ---
        const spaceTop = clickRect.top;
        const spaceBottom = screenHeight - clickRect.bottom;
        const spaceLeft = clickRect.left;
        const spaceRight = screenWidth - clickRect.right;

        // --- 自动方向选择（当 type 未指定） ---
        let finalType = preferred;
        if (preferred === 'auto') {
            if (spaceBottom >= popupHeight) finalType = 'bottom';
            else if (spaceTop >= popupHeight) finalType = 'top';
            else if (spaceRight >= popupWidth) finalType = 'right';
            else if (spaceLeft >= popupWidth) finalType = 'left';
            else finalType = 'bottom'; // 默认下方
        }

        // --- 根据方位设置坐标 ---
        switch (finalType) {
            case 'top':
                top = clickRect.top - popupHeight;
                left = centerX - popupWidth / 2;
                break;
            case 'bottom':
                top = clickRect.bottom;
                left = centerX - popupWidth / 2;
                break;
            case 'left':
                top = centerY - popupHeight / 2;
                left = clickRect.left - popupWidth;
                break;
            case 'right':
                top = centerY - popupHeight / 2;
                left = clickRect.right;
                break;
            case 'top-left':
                top = clickRect.top - popupHeight;
                left = clickRect.left;
                break;
            case 'top-right':
                top = clickRect.top - popupHeight;
                left = clickRect.right - popupWidth;
                break;
            case 'bottom-left':
                top = clickRect.bottom;
                left = clickRect.left;
                break;
            case 'bottom-right':
                top = clickRect.bottom;
                left = clickRect.right - popupWidth;
                break;
        }

        // --- 防止出界处理 ---
        if (left + popupWidth > screenWidth - 5) left = screenWidth - popupWidth - 5;
        if (left < 5) left = 5;
        if (top + popupHeight > screenHeight - 5) top = screenHeight - popupHeight - 5;
        if (top < 5) top = 5;

        // --- 应用位置 ---
        popupElement.style.top = `${top}px`;
        popupElement.style.left = `${left}px`;
    });
}