uniapp-app/components/GlobalDialog.vue

<template>
	<view v-show="visible" class="gd-mask" :class="alignClass" :style="maskStyle">
		<view
			class="gd-dialog"
			@touchstart="onTouchStart"
			@touchmove="onTouchMove"
			@touchend="onTouchEnd"
		>
			<view class="gd-title">{{ title }}</view>
			<scroll-view class="gd-content" scroll-y>
				<text class="gd-text">{{ content }}</text>
			</scroll-view>
			<!-- <view class="gd-footer">
				<view class="gd-btn gd-confirm" @click="handleConfirm">{{ confirmText }}</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'

const visible = ref(false)
const title = ref('消息通知')
const content = ref('')
const confirmText = ref('我知道了')
const position = ref('center') // 'center' | 'top'
const offsetTop = ref('20rpx')
const autoHideTimer = ref(null)

const startY = ref(0)
const hasSwipedUp = ref(false)

const emit = defineEmits(['confirm'])

function handleConfirm(){
	visible.value = false
	emit('confirm')
}

function show(payload = {}){
	title.value = payload.title || '消息通知'
	content.value = payload.content || ''
	confirmText.value = payload.confirmText || '我知道了'
	position.value = payload.position === 'top' ? 'top' : 'center'
	offsetTop.value = payload.offsetTop || '20rpx'
	visible.value = true
	// 自动 5 秒后消失
	if (autoHideTimer.value) clearTimeout(autoHideTimer.value)
	autoHideTimer.value = setTimeout(() => {
		hide()
	}, 5000)
}

function hide(){
	visible.value = false
	if (autoHideTimer.value) {
		clearTimeout(autoHideTimer.value)
		autoHideTimer.value = null
	}
}

function onTouchStart(e){
	const touch = e.changedTouches ? e.changedTouches[0] : (e.touches ? e.touches[0] : null)
	if (!touch) return
	startY.value = touch.clientY || touch.pageY || 0
	hasSwipedUp.value = false
}

function onTouchMove(e){
	const touch = e.changedTouches ? e.changedTouches[0] : (e.touches ? e.touches[0] : null)
	if (!touch) return
	const currentY = touch.clientY || touch.pageY || 0
	const deltaY = currentY - startY.value
	if (deltaY < -60) {
		hasSwipedUp.value = true
	}
}

function onTouchEnd(){
	if (hasSwipedUp.value) {
		hide()
	}
}

onMounted(() => {
	console.log('[GlobalDialog] mounted')
	uni.$on('global-dialog:show', show)
	uni.$on('global-dialog:hide', hide)
	// 便于全局手动触发测试
	// @ts-ignore
	uni.$showGlobalDialog = (payload = {}) => {
		console.log('[GlobalDialog] uni.$showGlobalDialog called', payload)
		uni.$emit('global-dialog:show', payload)
	}
})

onBeforeUnmount(() => {
	uni.$off('global-dialog:show', show)
	uni.$off('global-dialog:hide', hide)
})

const alignClass = computed(() => position.value === 'top' ? 'is-top' : 'is-center')
const maskStyle = computed(() => position.value === 'top' ? { paddingTop: offsetTop.value } : {})
</script>

<style scoped lang="scss">
.gd-mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    // 非模态：容器不截获事件
    pointer-events: none;
}
.gd-mask.is-top{
    align-items: flex-start;
    justify-content: center;
}
.gd-dialog{
	width: 600rpx;
	max-width: 90%;
	background: #fff;
	border-radius: 16rpx;
	overflow: hidden;
	// 允许对话框自己接收事件（容器为非模态）
	pointer-events: auto;
	// 轻微上滑消失的过渡体验
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.gd-title{
	padding: 28rpx 32rpx 12rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #111;
	text-align: left;
}
.gd-content{
	max-height: 420rpx;
	padding: 0 32rpx 24rpx;
}
.gd-text{
	font-size: 28rpx;
	line-height: 1.7;
	color: #333;
}
.gd-footer{
	padding: 16rpx 24rpx 24rpx;
	display: flex;
	justify-content: center;
}
.gd-btn{
	min-width: 200rpx;
	padding: 20rpx 24rpx;
	text-align: center;
	border-radius: 12rpx;
	font-size: 28rpx;
}
.gd-confirm{
	background: #2979ff;
	color: #fff;
}
</style>