uniapp-dyckui 4.1.2 → 4.1.4

package/src/components/MyComs/Popup/index.vue

@@ -1,835 +1,837 @@
-<template>
-  <view
-    v-show="showPopup"
-    class="popup-wrapper"
-    :class="{
-      'modal': mask,
-      'non-modal': !mask,
-      'closing': isClosing,
-    }"
-    @click.self="handleMaskClick"
-  >
-    <!-- 遮罩层 -->
-    <view
-      v-if="mask"
-      class="popup-mask"
-      :style="{ opacity: maskOpacity }"
-      @click="handleMaskClick"
-    />
-
-    <!-- 弹窗主体 -->
-    <view
-      ref="popupRef"
-      class="popup-container"
-      :class="[
-        `position-${position}`,
-        `animation-${animation}`,
-        { closing: isClosing },
-      ]"
-      @click.stop
-      @touchmove.stop
-      @animationend="handleAnimationEnd"
-    >
-      <!-- 自定义头部 -->
-      <view v-if="$slots.header" class="popup-header">
-        <slot name="header" />
-      </view>
-
-      <!-- 自定义标题 -->
-      <view v-else-if="title" class="popup-header">
-        <text class="popup-title">{{ title }}</text>
-      </view>
-
-      <!-- 内容区域 -->
-      <view class="popup-content">
-        <slot />
-      </view>
-
-      <!-- 自定义底部 -->
-      <view v-if="$slots.footer" class="popup-footer">
-        <slot name="footer" />
-      </view>
-
-      <!-- 默认底部按钮 -->
-      <view v-else-if="showConfirmButton || showCancelButton" class="popup-footer">
-        <view
-          v-if="showCancelButton"
-          class="popup-button popup-button-cancel"
-          @click="handleCancel"
-        >
-          {{ cancelText }}
-        </view>
-        <view
-          v-if="showConfirmButton"
-          class="popup-button popup-button-confirm"
-          @click="handleConfirm"
-        >
-          {{ confirmText }}
-        </view>
-      </view>
-
-      <!-- 关闭按钮 -->
-      <view
-        v-if="showCloseButton"
-        class="popup-close-button"
-        @click="handleClose"
-      >
-        <text class="close-icon">×</text>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-
-// Props
-interface Props {
-  // 控制弹窗显示/隐藏（支持v-model）
-  modelValue?: boolean
-  // 弹窗标题
-  title?: string
-  // 弹窗位置：center, top, bottom, left, right
-  position?: 'center' | 'top' | 'bottom' | 'left' | 'right'
-  // 动画效果：fade, scale, slide
-  animation?: 'fade' | 'scale' | 'slide'
-  // 是否显示遮罩层
-  mask?: boolean
-  // 遮罩层透明度
-  maskOpacity?: number
-  // 点击遮罩是否关闭弹窗
-  closeOnMaskClick?: boolean
-  // 是否显示关闭按钮
-  showCloseButton?: boolean
-  // 是否支持Esc键关闭
-  closeOnEsc?: boolean
-  // 是否显示确认按钮
-  showConfirmButton?: boolean
-  // 确认按钮文本
-  confirmText?: string
-  // 是否显示取消按钮
-  showCancelButton?: boolean
-  // 取消按钮文本
-  cancelText?: string
-  // 弹窗宽度（百分比或像素）
-  width?: string | number
-  // 弹窗高度（百分比或像素）
-  height?: string | number
-  // 弹窗最大宽度
-  maxWidth?: string | number
-  // 是否禁止背景滚动
-  lockScroll?: boolean
-}
-
-// 设置默认属性
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
-  title: '',
-  position: 'center',
-  animation: 'slide',
-  mask: true,
-  maskOpacity: 0.5,
-  closeOnMaskClick: true,
-  showCloseButton: true,
-  closeOnEsc: true,
-  showConfirmButton: false,
-  confirmText: '确定',
-  showCancelButton: false,
-  cancelText: '取消',
-  width: '50%',
-  height: '100%',
-  maxWidth: '500px',
-  lockScroll: true,
-})
-
-// Emits
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'open'): void
-  (e: 'close'): void
-  (e: 'maskClick'): void
-  (e: 'confirm'): void
-  (e: 'cancel'): void
-  (e: 'closeButtonClick'): void
-}>()
-
-// Refs
-const popupRef = ref<any>(null)
-const showPopup = ref(props.modelValue)
-const isClosing = ref(false)
-const lastScrollY = ref(0)
-
-// Watchers
-// 监听modelValue变化
-watch(() => props.modelValue, (newVal) => {
-  showPopup.value = newVal
-  if (newVal) {
-    onOpen()
-  }
-  else {
-    onClose()
-  }
-})
-
-// 监听showPopup变化
-watch(() => showPopup.value, (newVal) => {
-  // 同步到v-model
-  emit('update:modelValue', newVal)
-  if (newVal) {
-    onOpen()
-  }
-  else {
-    onClose()
-  }
-})
-
-// Methods
-// 弹窗打开时
-function onOpen() {
-  // 锁定滚动
-  if (props.lockScroll) {
-    lockScroll()
-  }
-
-  // 添加键盘事件监听
-  if (props.closeOnEsc) {
-    window.addEventListener('keydown', handleKeyDown)
-  }
-
-  // 触发打开事件
-  emit('open')
-}
-
-// 弹窗关闭时
-function onClose() {
-  // 解锁滚动
-  if (props.lockScroll) {
-    unlockScroll()
-  }
-
-  // 移除键盘事件监听
-  window.removeEventListener('keydown', handleKeyDown)
-
-  // 触发关闭事件
-  emit('close')
-}
-
-// 锁定滚动
-function lockScroll() {
-  // #ifdef H5
-  lastScrollY.value = window.scrollY
-  document.body.style.position = 'fixed'
-  document.body.style.top = `-${lastScrollY.value}px`
-  document.body.style.left = '0'
-  document.body.style.right = '0'
-  document.body.style.overflow = 'hidden'
-  // #endif
-
-  // #ifdef MP
-  uni.hideTabBar()
-  // #endif
-}
-
-// 解锁滚动
-function unlockScroll() {
-  // #ifdef H5
-  document.body.style.position = ''
-  document.body.style.top = ''
-  document.body.style.left = ''
-  document.body.style.right = ''
-  document.body.style.overflow = ''
-  window.scrollTo(0, lastScrollY.value)
-  // #endif
-
-  // #ifdef MP
-  uni.showTabBar()
-  // #endif
-}
-
-// 键盘事件处理
-function handleKeyDown(e) {
-  // #ifdef H5
-  if (e.key === 'Escape' && props.closeOnEsc && showPopup.value) {
-    handleClose()
-  }
-  // #endif
-}
-
-// 点击遮罩层
-function handleMaskClick() {
-  if (props.closeOnMaskClick) {
-    handleClose()
-  }
-  emit('maskClick')
-}
-
-// 点击关闭按钮
-function handleClose() {
-  isClosing.value = true
-  emit('closeButtonClick')
-}
-
-// 动画结束事件处理
-function handleAnimationEnd() {
-  if (isClosing.value) {
-    isClosing.value = false
-    showPopup.value = false
-  }
-}
-
-// 点击确认按钮
-function handleConfirm() {
-  emit('confirm')
-}
-
-// 点击取消按钮
-function handleCancel() {
-  emit('cancel')
-  handleClose()
-}
-
-// 生命周期
-onMounted(() => {
-  if (showPopup.value) {
-    onOpen()
-  }
-})
-
-onUnmounted(() => {
-  if (showPopup.value) {
-    onClose()
-  }
-})
-</script>
-
-<style scoped>
-/* 弹窗容器 */
-.popup-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-
-/* 模态模式 */
-.popup-wrapper.modal {
-  pointer-events: auto;
-}
-
-/* 非模态模式 */
-.popup-wrapper.non-modal {
-  pointer-events: none;
-}
-
-.popup-wrapper.non-modal .popup-container {
-  pointer-events: auto;
-}
-
-/* 遮罩层 */
-.popup-mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  transition: opacity 0.3s ease;
-}
-
-/* 弹窗主体 */
-.popup-container {
-  position: fixed;
-  background-color: white;
-  border-radius: 16rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
-  width: var(--popup-width, 100%);
-  max-width: var(--popup-max-width, 750rpx);
-  max-height: 90vh;
-  overflow: hidden;
-  pointer-events: auto;
-}
-
-/* 头部 */
-.popup-header {
-  padding: 32rpx 40rpx;
-  border-bottom: 2rpx solid #ebeef5;
-}
-
-.popup-title {
-  margin: 0;
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #303133;
-}
-
-/* 内容 */
-.popup-content {
-  padding: 40rpx;
-  max-height: calc(90vh - 240rpx);
-  overflow-y: auto;
-}
-
-/* 底部 */
-.popup-footer {
-  padding: 32rpx 40rpx;
-  border-top: 2rpx solid #ebeef5;
-  display: flex;
-  justify-content: flex-end;
-  gap: 24rpx;
-}
-
-/* 按钮 */
-.popup-button {
-  padding: 16rpx 32rpx;
-  border: none;
-  border-radius: 8rpx;
-  font-size: 28rpx;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.popup-button-cancel {
-  background-color: #f5f7fa;
-  color: #606266;
-}
-
-.popup-button-cancel:hover {
-  background-color: #e4e7ed;
-}
-
-.popup-button-confirm {
-  background-color: #409eff;
-  color: white;
-}
-
-.popup-button-confirm:hover {
-  background-color: #66b1ff;
-}
-
-/* 关闭按钮 */
-.popup-close-button {
-  position: absolute;
-  top: 24rpx;
-  right: 24rpx;
-  width: 48rpx;
-  height: 48rpx;
-  background-color: transparent;
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #909399;
-  transition: all 0.3s ease;
-}
-
-.popup-close-button:hover {
-  background-color: #f5f7fa;
-  color: #606266;
-}
-
-/* 关闭图标 */
-.close-icon {
-  font-size: 40rpx;
-  font-weight: bold;
-  line-height: 1;
-}
-
-/* 位置样式 */
-/* 居中 */
-.position-center {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-/* 顶部 */
-.position-top {
-  top: 0;
-  left: 0;
-  width: 100%;
-  border-radius: 0 0 16rpx 16rpx;
-}
-
-/* 底部 */
-.position-bottom {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  border-radius: 16rpx 16rpx 0 0;
-}
-
-/* 左侧 */
-.position-left {
-  top: 0;
-  left: 0;
-  height: 100%;
-  border-radius: 0 16rpx 16rpx 0;
-}
-
-/* 右侧 */
-.position-right {
-  top: 0;
-  right: 0;
-  height: 100%;
-  border-radius: 16rpx 0 0 16rpx;
-}
-
-/* 动画样式 */
-/* 淡入淡出 */
-.animation-fade {
-  animation: fadeIn 0.3s ease;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* 缩放 */
-.animation-scale {
-  animation: scaleIn 0.3s ease;
-}
-
-@keyframes scaleIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-/* 顶部位置的缩放动画 */
-.position-top.animation-scale {
-  animation: scaleInTop 0.3s ease;
-}
-
-@keyframes scaleInTop {
-  from {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* 底部位置的缩放动画 */
-.position-bottom.animation-scale {
-  animation: scaleInBottom 0.3s ease;
-}
-
-@keyframes scaleInBottom {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* 左侧位置的缩放动画 */
-.position-left.animation-scale {
-  animation: scaleInLeft 0.3s ease;
-}
-
-@keyframes scaleInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* 右侧位置的缩放动画 */
-.position-right.animation-scale {
-  animation: scaleInRight 0.3s ease;
-}
-
-@keyframes scaleInRight {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* 滑动动画 */
-.animation-slide {
-  animation: slideIn 0.3s ease;
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -100%);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-}
-
-/* 顶部位置的滑动动画 */
-.position-top.animation-slide {
-  animation: slideInTop 0.3s ease;
-}
-
-@keyframes slideInTop {
-  from {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* 底部位置的滑动动画 */
-.position-bottom.animation-slide {
-  animation: slideInBottom 0.3s ease;
-}
-
-@keyframes slideInBottom {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* 左侧位置的滑动动画 */
-.position-left.animation-slide {
-  animation: slideInLeft 0.3s ease;
-}
-
-@keyframes slideInLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* 右侧位置的滑动动画 */
-.position-right.animation-slide {
-  animation: slideInRight 0.3s ease;
-}
-
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* 关闭动画 */
-/* 淡入淡出关闭动画 */
-.animation-fade.closing {
-  animation: fadeOut 0.3s ease;
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-/* 缩放关闭动画 */
-.animation-scale.closing {
-  animation: scaleOut 0.3s ease;
-}
-
-@keyframes scaleOut {
-  from {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.8);
-  }
-}
-
-/* 顶部位置的缩放关闭动画 */
-.position-top.animation-scale.closing {
-  animation: scaleOutTop 0.3s ease;
-}
-
-@keyframes scaleOutTop {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-}
-
-/* 底部位置的缩放关闭动画 */
-.position-bottom.animation-scale.closing {
-  animation: scaleOutBottom 0.3s ease;
-}
-
-@keyframes scaleOutBottom {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-}
-
-/* 左侧位置的缩放关闭动画 */
-.position-left.animation-scale.closing {
-  animation: scaleOutLeft 0.3s ease;
-}
-
-@keyframes scaleOutLeft {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
-
-/* 右侧位置的缩放关闭动画 */
-.position-right.animation-scale.closing {
-  animation: scaleOutRight 0.3s ease;
-}
-
-@keyframes scaleOutRight {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-
-/* 滑动关闭动画 */
-.animation-slide.closing {
-  animation: slideOut 0.3s ease;
-}
-
-@keyframes slideOut {
-  from {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -100%);
-  }
-}
-
-/* 顶部位置的滑动关闭动画 */
-.position-top.animation-slide.closing {
-  animation: slideOutTop 0.3s ease;
-}
-
-@keyframes slideOutTop {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-}
-
-/* 底部位置的滑动关闭动画 */
-.position-bottom.animation-slide.closing {
-  animation: slideOutBottom 0.3s ease;
-}
-
-@keyframes slideOutBottom {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-}
-
-/* 左侧位置的滑动关闭动画 */
-.position-left.animation-slide.closing {
-  animation: slideOutLeft 0.3s ease;
-}
-
-@keyframes slideOutLeft {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
-
-/* 右侧位置的滑动关闭动画 */
-.position-right.animation-slide.closing {
-  animation: slideOutRight 0.3s ease;
-}
-
-@keyframes slideOutRight {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-</style>
+<template>
+  <view
+    v-show="showPopup"
+    class="popup-wrapper"
+    :class="{
+      'modal': mask,
+      'non-modal': !mask,
+      'closing': isClosing,
+    }"
+    @click.self="handleMaskClick"
+  >
+    <!-- 遮罩层 -->
+    <view
+      v-if="mask"
+      class="popup-mask"
+      :style="{ opacity: maskOpacity }"
+      @click="handleMaskClick"
+    />
+
+    <!-- 弹窗主体 -->
+    <view
+      ref="popupRef"
+      class="popup-container"
+      :class="[
+        `position-${position}`,
+        `animation-${animation}`,
+        { closing: isClosing },
+      ]"
+      @click.stop
+      @touchmove.stop
+      @animationend="handleAnimationEnd"
+    >
+      <!-- 自定义头部 -->
+      <view v-if="$slots.header" class="popup-header">
+        <slot name="header" />
+      </view>
+
+      <!-- 自定义标题 -->
+      <view v-else-if="title" class="popup-header">
+        <text class="popup-title">{{ title }}</text>
+      </view>
+
+      <!-- 内容区域 -->
+      <view class="popup-content">
+        <slot />
+      </view>
+
+      <!-- 自定义底部 -->
+      <view v-if="$slots.footer" class="popup-footer">
+        <slot name="footer" />
+      </view>
+
+      <!-- 默认底部按钮 -->
+      <view v-else-if="showConfirmButton || showCancelButton" class="popup-footer">
+        <view
+          v-if="showCancelButton"
+          class="popup-button popup-button-cancel"
+          @click="handleCancel"
+        >
+          {{ cancelText }}
+        </view>
+        <view
+          v-if="showConfirmButton"
+          class="popup-button popup-button-confirm"
+          @click="handleConfirm"
+        >
+          {{ confirmText }}
+        </view>
+      </view>
+
+      <!-- 关闭按钮 -->
+      <view
+        v-if="showCloseButton"
+        class="popup-close-button"
+        @click="handleClose"
+      >
+        <text class="close-icon">×</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+// Props
+interface Props {
+  // 控制弹窗显示/隐藏（支持v-model）
+  modelValue?: boolean
+  // 弹窗标题
+  title?: string
+  // 弹窗位置：center, top, bottom, left, right
+  position?: 'center' | 'top' | 'bottom' | 'left' | 'right'
+  // 动画效果：fade, scale, slide
+  animation?: 'fade' | 'scale' | 'slide'
+  // 是否显示遮罩层
+  mask?: boolean
+  // 遮罩层透明度
+  maskOpacity?: number
+  // 点击遮罩是否关闭弹窗
+  closeOnMaskClick?: boolean
+  // 是否显示关闭按钮
+  showCloseButton?: boolean
+  // 是否支持Esc键关闭
+  closeOnEsc?: boolean
+  // 是否显示确认按钮
+  showConfirmButton?: boolean
+  // 确认按钮文本
+  confirmText?: string
+  // 是否显示取消按钮
+  showCancelButton?: boolean
+  // 取消按钮文本
+  cancelText?: string
+  // 弹窗宽度（百分比或像素）
+  width?: string | number
+  // 弹窗高度（百分比或像素）
+  height?: string | number
+  // 弹窗最大宽度
+  maxWidth?: string | number
+  // 是否禁止背景滚动
+  lockScroll?: boolean
+}
+
+// 设置默认属性
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  title: '',
+  position: 'center',
+  animation: 'slide',
+  mask: true,
+  maskOpacity: 0.5,
+  closeOnMaskClick: true,
+  showCloseButton: true,
+  closeOnEsc: true,
+  showConfirmButton: false,
+  confirmText: '确定',
+  showCancelButton: false,
+  cancelText: '取消',
+  width: '50%',
+  height: '100%',
+  maxWidth: '500px',
+  lockScroll: true,
+})
+
+// Emits
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'open'): void
+  (e: 'close'): void
+  (e: 'maskClick'): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+  (e: 'closeButtonClick'): void
+}>()
+
+// Refs
+const popupRef = ref<any>(null)
+const showPopup = ref(props.modelValue)
+const isClosing = ref(false)
+const lastScrollY = ref(0)
+
+// Watchers
+// 监听modelValue变化
+watch(() => props.modelValue, (newVal) => {
+  showPopup.value = newVal
+  if (newVal) {
+    onOpen()
+  }
+  else {
+    onClose()
+  }
+})
+
+// 监听showPopup变化
+watch(() => showPopup.value, (newVal) => {
+  // 同步到v-model
+  emit('update:modelValue', newVal)
+  if (newVal) {
+    onOpen()
+  }
+  else {
+    onClose()
+  }
+})
+
+// Methods
+// 弹窗打开时
+function onOpen() {
+  // 锁定滚动
+  if (props.lockScroll) {
+    lockScroll()
+  }
+
+  // 添加键盘事件监听
+  if (props.closeOnEsc) {
+    window.addEventListener('keydown', handleKeyDown)
+  }
+
+  // 触发打开事件
+  emit('open')
+}
+
+// 弹窗关闭时
+function onClose() {
+  // 解锁滚动
+  if (props.lockScroll) {
+    unlockScroll()
+  }
+
+  // 移除键盘事件监听
+  window.removeEventListener('keydown', handleKeyDown)
+
+  // 触发关闭事件
+  emit('close')
+}
+
+// 锁定滚动
+function lockScroll() {
+  // #ifdef H5
+  lastScrollY.value = window.scrollY
+  document.body.style.position = 'fixed'
+  document.body.style.top = `-${lastScrollY.value}px`
+  document.body.style.left = '0'
+  document.body.style.right = '0'
+  document.body.style.overflow = 'hidden'
+  // #endif
+
+  // #ifdef MP
+  // @ts-ignore
+  uni.hideTabBar()
+  // #endif
+}
+
+// 解锁滚动
+function unlockScroll() {
+  // #ifdef H5
+  document.body.style.position = ''
+  document.body.style.top = ''
+  document.body.style.left = ''
+  document.body.style.right = ''
+  document.body.style.overflow = ''
+  window.scrollTo(0, lastScrollY.value)
+  // #endif
+
+  // #ifdef MP
+  // @ts-ignore
+  uni.showTabBar()
+  // #endif
+}
+
+// 键盘事件处理
+function handleKeyDown(e) {
+  // #ifdef H5
+  if (e.key === 'Escape' && props.closeOnEsc && showPopup.value) {
+    handleClose()
+  }
+  // #endif
+}
+
+// 点击遮罩层
+function handleMaskClick() {
+  if (props.closeOnMaskClick) {
+    handleClose()
+  }
+  emit('maskClick')
+}
+
+// 点击关闭按钮
+function handleClose() {
+  isClosing.value = true
+  emit('closeButtonClick')
+}
+
+// 动画结束事件处理
+function handleAnimationEnd() {
+  if (isClosing.value) {
+    isClosing.value = false
+    showPopup.value = false
+  }
+}
+
+// 点击确认按钮
+function handleConfirm() {
+  emit('confirm')
+}
+
+// 点击取消按钮
+function handleCancel() {
+  emit('cancel')
+  handleClose()
+}
+
+// 生命周期
+onMounted(() => {
+  if (showPopup.value) {
+    onOpen()
+  }
+})
+
+onUnmounted(() => {
+  if (showPopup.value) {
+    onClose()
+  }
+})
+</script>
+
+<style scoped>
+/* 弹窗容器 */
+.popup-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+/* 模态模式 */
+.popup-wrapper.modal {
+  pointer-events: auto;
+}
+
+/* 非模态模式 */
+.popup-wrapper.non-modal {
+  pointer-events: none;
+}
+
+.popup-wrapper.non-modal .popup-container {
+  pointer-events: auto;
+}
+
+/* 遮罩层 */
+.popup-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.3s ease;
+}
+
+/* 弹窗主体 */
+.popup-container {
+  position: fixed;
+  background-color: white;
+  border-radius: 16rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
+  width: var(--popup-width, 100%);
+  max-width: var(--popup-max-width, 750rpx);
+  max-height: 90vh;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+/* 头部 */
+.popup-header {
+  padding: 32rpx 40rpx;
+  border-bottom: 2rpx solid #ebeef5;
+}
+
+.popup-title {
+  margin: 0;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #303133;
+}
+
+/* 内容 */
+.popup-content {
+  padding: 40rpx;
+  max-height: calc(90vh - 240rpx);
+  overflow-y: auto;
+}
+
+/* 底部 */
+.popup-footer {
+  padding: 32rpx 40rpx;
+  border-top: 2rpx solid #ebeef5;
+  display: flex;
+  justify-content: flex-end;
+  gap: 24rpx;
+}
+
+/* 按钮 */
+.popup-button {
+  padding: 16rpx 32rpx;
+  border: none;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.popup-button-cancel {
+  background-color: #f5f7fa;
+  color: #606266;
+}
+
+.popup-button-cancel:hover {
+  background-color: #e4e7ed;
+}
+
+.popup-button-confirm {
+  background-color: #409eff;
+  color: white;
+}
+
+.popup-button-confirm:hover {
+  background-color: #66b1ff;
+}
+
+/* 关闭按钮 */
+.popup-close-button {
+  position: absolute;
+  top: 24rpx;
+  right: 24rpx;
+  width: 48rpx;
+  height: 48rpx;
+  background-color: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  transition: all 0.3s ease;
+}
+
+.popup-close-button:hover {
+  background-color: #f5f7fa;
+  color: #606266;
+}
+
+/* 关闭图标 */
+.close-icon {
+  font-size: 40rpx;
+  font-weight: bold;
+  line-height: 1;
+}
+
+/* 位置样式 */
+/* 居中 */
+.position-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* 顶部 */
+.position-top {
+  top: 0;
+  left: 0;
+  width: 100%;
+  border-radius: 0 0 16rpx 16rpx;
+}
+
+/* 底部 */
+.position-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  border-radius: 16rpx 16rpx 0 0;
+}
+
+/* 左侧 */
+.position-left {
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 0 16rpx 16rpx 0;
+}
+
+/* 右侧 */
+.position-right {
+  top: 0;
+  right: 0;
+  height: 100%;
+  border-radius: 16rpx 0 0 16rpx;
+}
+
+/* 动画样式 */
+/* 淡入淡出 */
+.animation-fade {
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 缩放 */
+.animation-scale {
+  animation: scaleIn 0.3s ease;
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* 顶部位置的缩放动画 */
+.position-top.animation-scale {
+  animation: scaleInTop 0.3s ease;
+}
+
+@keyframes scaleInTop {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 底部位置的缩放动画 */
+.position-bottom.animation-scale {
+  animation: scaleInBottom 0.3s ease;
+}
+
+@keyframes scaleInBottom {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 左侧位置的缩放动画 */
+.position-left.animation-scale {
+  animation: scaleInLeft 0.3s ease;
+}
+
+@keyframes scaleInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 右侧位置的缩放动画 */
+.position-right.animation-scale {
+  animation: scaleInRight 0.3s ease;
+}
+
+@keyframes scaleInRight {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 滑动动画 */
+.animation-slide {
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+
+/* 顶部位置的滑动动画 */
+.position-top.animation-slide {
+  animation: slideInTop 0.3s ease;
+}
+
+@keyframes slideInTop {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 底部位置的滑动动画 */
+.position-bottom.animation-slide {
+  animation: slideInBottom 0.3s ease;
+}
+
+@keyframes slideInBottom {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 左侧位置的滑动动画 */
+.position-left.animation-slide {
+  animation: slideInLeft 0.3s ease;
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 右侧位置的滑动动画 */
+.position-right.animation-slide {
+  animation: slideInRight 0.3s ease;
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 关闭动画 */
+/* 淡入淡出关闭动画 */
+.animation-fade.closing {
+  animation: fadeOut 0.3s ease;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* 缩放关闭动画 */
+.animation-scale.closing {
+  animation: scaleOut 0.3s ease;
+}
+
+@keyframes scaleOut {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+}
+
+/* 顶部位置的缩放关闭动画 */
+.position-top.animation-scale.closing {
+  animation: scaleOutTop 0.3s ease;
+}
+
+@keyframes scaleOutTop {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+/* 底部位置的缩放关闭动画 */
+.position-bottom.animation-scale.closing {
+  animation: scaleOutBottom 0.3s ease;
+}
+
+@keyframes scaleOutBottom {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+/* 左侧位置的缩放关闭动画 */
+.position-left.animation-scale.closing {
+  animation: scaleOutLeft 0.3s ease;
+}
+
+@keyframes scaleOutLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+/* 右侧位置的缩放关闭动画 */
+.position-right.animation-scale.closing {
+  animation: scaleOutRight 0.3s ease;
+}
+
+@keyframes scaleOutRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+/* 滑动关闭动画 */
+.animation-slide.closing {
+  animation: slideOut 0.3s ease;
+}
+
+@keyframes slideOut {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
+}
+
+/* 顶部位置的滑动关闭动画 */
+.position-top.animation-slide.closing {
+  animation: slideOutTop 0.3s ease;
+}
+
+@keyframes slideOutTop {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+/* 底部位置的滑动关闭动画 */
+.position-bottom.animation-slide.closing {
+  animation: slideOutBottom 0.3s ease;
+}
+
+@keyframes slideOutBottom {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+/* 左侧位置的滑动关闭动画 */
+.position-left.animation-slide.closing {
+  animation: slideOutLeft 0.3s ease;
+}
+
+@keyframes slideOutLeft {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+/* 右侧位置的滑动关闭动画 */
+.position-right.animation-slide.closing {
+  animation: slideOutRight 0.3s ease;
+}
+
+@keyframes slideOutRight {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+</style>