gypsy-crm-frontend-vu/components/cwg-dropdown.vue

<template>
    <view class="cwg-dropdown-root" :data-dropdown-id="dropdownUid">
        <view class="cwg-dropdown" :style="customStyle" @click="click">
            <slot></slot>
        </view>
        <view class="cwg-dropdown-menu">
            <view class="cwg-dropdown-menu-container" :style="[layout]" @click.stop>

                <slot name="menu">
                    <view class="menu">
                        <slot name="btn"></slot>
                        <view class="menu-item" :class="{ active: props.showActive && isActive(item), disabled: item.disabled || false }"
                            v-for="(item, idx) in menuList" :key="idx"
                            @click="menuClick(item, idx)">
                            <view>{{ item.label || item }}</view>
<!--                            <view v-if="props.showActive && isActive(item)" class="active-icon">✓</view>-->
                        </view>
                    </view>
                </slot>
            </view>
        </view>
        <view class="cwg-dropdown-mask" :class="{ 'cwg-dropdown-mask-show': maskShow }" />
    </view>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, onUnmounted, watch, getCurrentInstance } from 'vue'
import { str2px, commonProps } from '@/uni_modules/x-tools/tools/com.js'

const DROPDOWN_CLOSE_EVENT = 'cwg-dropdown:close-others'
const DROPDOWN_CLOSE_ALL_EVENT = 'cwg-dropdown:close-all'
const instance = getCurrentInstance()
const dropdownUid = `cwg-dropdown-${Math.random().toString(36).slice(2, 9)}`

// 合并 props
const props = defineProps({
    ...commonProps,
    menuList: {
        type: Object,
        default: () => ['菜单1', '菜单2', '菜单3']
    },
    menuStyle: {
        type: Object,
        default: () => ({})
    },
    interspace: {
        type: [String, Number],
        default: '10rpx'
    },
    // 是否显示选中样式
    showActive: {
        type: Boolean,
        default: false
    },
    // 当前选中项的 key（用于匹配 menuList 中的项）
    activeKey: {
        type: [String, Number],
        default: ''
    }
})

const emit = defineEmits(['open', 'close', 'change', 'menuClick'])

// 判断菜单项是否为选中状态
const isActive = (item) => {
    if (!props.showActive || !props.activeKey) return false
    // 支持多种 key 字段匹配
    const itemKey = item.key !== undefined ? item.key :
                     item.value !== undefined ? item.value :
                     item.sysCode !== undefined ? item.sysCode :
                     item.type !== undefined ? item.type : ''
    return itemKey === props.activeKey
}

// 响应式数据
const maskShow = ref(false)
const windowInfo = reactive({
    width: 0,
    height: 0
})
const layout = reactive({})
const innerInterspace = ref(0)

const TAP_MOVE_THRESHOLD = 10
const OPEN_GUARD_MS = 300
let openTimestamp = 0
let outsideListenersBound = false
const touchState = {
    startX: 0,
    startY: 0,
    moved: false,
}

function getTouchPoint(e) {
    const touch = e.touches?.[0] || e.changedTouches?.[0]
    return touch ? { x: touch.clientX, y: touch.clientY } : null
}

function queryInComponent(selector) {
    return new Promise((resolve) => {
        uni.createSelectorQuery()
            .in(instance?.proxy)
            .select(selector)
            .boundingClientRect(resolve)
            .exec()
    })
}

function isInsideCurrentDropdown(target) {
    if (!target?.closest) return false
    return !!target.closest(`[data-dropdown-id="${dropdownUid}"]`)
}

const OVERLAY_SELECTORS = [
    '.cwg-dialog',
    '.crm-popup',
    '.uni-popup',
    '.uni-popup__wrapper',
    '.uni-modal',
    '.uni-mask',
    '.dialog-footer',
    '.confirm-title',
    '.confirm-content',
]

function isInsideOverlay(target) {
    if (!target?.closest) return false
    return OVERLAY_SELECTORS.some((selector) => target.closest(selector))
}

function onOutsideTouchStart(e) {
    if (!maskShow.value) return
    const point = getTouchPoint(e)
    if (!point) return
    touchState.startX = point.x
    touchState.startY = point.y
    touchState.moved = false
}

function onOutsideTouchMove(e) {
    if (!maskShow.value) return
    const point = getTouchPoint(e)
    if (!point) return
    if (
        Math.abs(point.x - touchState.startX) > TAP_MOVE_THRESHOLD
        || Math.abs(point.y - touchState.startY) > TAP_MOVE_THRESHOLD
    ) {
        touchState.moved = true
    }
}

function onOutsideTouchEnd(e) {
    if (!maskShow.value) return
    if (Date.now() - openTimestamp < OPEN_GUARD_MS) return
    if (touchState.moved) return
    if (isInsideCurrentDropdown(e.target) || isInsideOverlay(e.target)) return
    e.preventDefault()
    e.stopPropagation()
    close()
}

function onOutsideClick(e) {
    if (!maskShow.value) return
    if (Date.now() - openTimestamp < OPEN_GUARD_MS) return
    if (isInsideCurrentDropdown(e.target) || isInsideOverlay(e.target)) return
    e.preventDefault()
    e.stopPropagation()
    close()
}

function bindOutsideListeners() {
    if (outsideListenersBound || typeof document === 'undefined') return
    outsideListenersBound = true
    document.addEventListener('touchstart', onOutsideTouchStart, true)
    document.addEventListener('touchmove', onOutsideTouchMove, { capture: true, passive: true })
    document.addEventListener('touchend', onOutsideTouchEnd, { capture: true, passive: false })
    document.addEventListener('click', onOutsideClick, true)
}

function unbindOutsideListeners() {
    if (!outsideListenersBound || typeof document === 'undefined') return
    outsideListenersBound = false
    document.removeEventListener('touchstart', onOutsideTouchStart, true)
    document.removeEventListener('touchmove', onOutsideTouchMove, true)
    document.removeEventListener('touchend', onOutsideTouchEnd, true)
    document.removeEventListener('click', onOutsideClick, true)
}

watch(maskShow, (visible) => {
    if (visible) {
        bindOutsideListeners()
    } else {
        unbindOutsideListeners()
    }
})

// 获取系统信息
const getSystemInfo = () => {
    return new Promise((resolve) => {
        if (windowInfo.width > 0) {
            resolve(windowInfo)
        } else {
            uni.getSystemInfo({
                success: (res) => {
                    windowInfo.width = res.windowWidth
                    windowInfo.height = res.windowHeight
                    resolve(windowInfo)
                },
                fail: () => {
                    setTimeout(() => getSystemInfo().then(resolve), 100)
                }
            })
        }
    })
}

// 点击触发器
const click = async (e) => {
    e.stopPropagation()
    if (maskShow.value) {
        close()
        return
    }
    uni.$emit(DROPDOWN_CLOSE_EVENT, dropdownUid)
    await getSystemInfo()
    const triggerRect = await queryInComponent('.cwg-dropdown')
    if (!triggerRect) return
    const tempStyle = {
        transform: 'scaleY(1)',
        visibility: 'hidden',
        top: '-9999px',
        left: '-9999px',
        transition: 'none'
    }
    Object.assign(layout, tempStyle)
    await nextTick()
    const menuRect = await queryInComponent('.cwg-dropdown-menu-container')
    if (!menuRect) {
        Object.keys(layout).forEach(key => delete layout[key])
        layout.transform = 'scaleY(0)'
        return
    }
    const { width: winWidth } = windowInfo
    const { left, right, bottom } = triggerRect
    const interspaceVal = innerInterspace.value
    const finalLayout = {
        transition: 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
        transform: 'scaleY(1)',
        top: `10px`
    }
    if (left + menuRect.width < winWidth) {
        finalLayout.left = `-110px`
    } else {
        const val = winWidth - right
        finalLayout.right = `${val > 0 ? val : 0}px`
    }
    Object.keys(layout).forEach(key => delete layout[key])
    Object.assign(layout, finalLayout)
    openTimestamp = Date.now()
    maskShow.value = true
    emit('open')
    emit('change', true)
}
const menuClick = (value, index) => {
    if (value.disabled) return
    emit('menuClick', { value, index })
    close()
}
const close = () => {
    if (!maskShow.value && Object.keys(layout).length === 0) return
    maskShow.value = false
    Object.keys(layout).forEach(key => delete layout[key])
    layout.transform = 'scaleY(0)'
    emit('close')
    emit('change', false)
}

function onCloseOthers(activeUid) {
    if (activeUid !== dropdownUid) {
        close()
    }
}

onMounted(() => {
    getSystemInfo()
    innerInterspace.value = str2px(props.interspace)

    uni.$on(DROPDOWN_CLOSE_EVENT, onCloseOthers)
    uni.$on(DROPDOWN_CLOSE_ALL_EVENT, close)
    
    uni.$on('logout', close)
})

onUnmounted(() => {
    uni.$off('logout', close)
    uni.$off(DROPDOWN_CLOSE_EVENT, onCloseOthers)
    uni.$off(DROPDOWN_CLOSE_ALL_EVENT, close)
    unbindOutsideListeners()
})
// 暴露方法
defineExpose({
    close
})
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.cwg-dropdown {
    width: fit-content;
    position: relative;
    overflow: hidden;
}

.cwg-dropdown-menu {
    position: relative;
    z-index: 999;
    pointer-events: none;
}

.cwg-dropdown-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 998;
    transition: all 0.3s;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
}

.cwg-dropdown-mask-show {
    opacity: 1;
    pointer-events: none;
    touch-action: pan-y;
    -webkit-touch-callout: none;
}

.cwg-dropdown-menu-container {
    position: absolute;
    transform-origin: top;
    transform: scaleY(0);
    pointer-events: auto;

    .menu {
        position: relative;
        --bs-bg-opacity: 1;
        background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
        border: 1px solid var(--bs-border-color);
        border-radius: px2rpx(4);
        overflow: hidden;

        .menu-item {
            min-width: px2rpx(150);
            display: flex;
            align-items: center;
            padding: px2rpx(10) px2rpx(16);
            font-size: px2rpx(14);
            line-height: px2rpx(30);
            color: var(--bs-emphasis-color);
            transition: background 0.2s;
            box-sizing: border-box;
            cursor: pointer;

            &:last-child {
                border-bottom: none;
            }

            text {
                flex: 1;
                line-height: 1.4;
            }

            &:hover {
                background-color: rgba(0, 0, 0, 0.05);
            }

            &:active {
                background-color: rgba(0, 0, 0, 0.05);
            }

            &.active {
                background-color: rgba(234, 0, 42, 0.1);
                color: #ea002a;
            }

            &.disabled {
                cursor: not-allowed;
                opacity: 0.5;
            }
        }
    }
}
</style>