aurora-admin/frameworks-mobile/Popup.uniapp.vue

<template>
  <view>
    <view class="kole-m-popup__mask" :class="{ 'is-open': open }" aria-hidden="true" @tap="onMaskTap"></view>
    <view
      class="kole-m-popup"
      :class="popupClass"
      :role="'dialog'"
      :aria-modal="'true'"
      :aria-label="title || ''"
    >
      <view class="kole-m-popup__header">
        <text>{{ title }}</text>
        <view class="kole-m-popup__close" role="button" :aria-label="closeLabel" @tap="onCloseTap">
          <text>✕</text>
        </view>
      </view>
      <view class="kole-m-popup__body"><slot></slot></view>
    </view>
  </view>
</template>

<script setup>
/* uni-app 端 · 弹出层（移动端）— 规格 §11
   跨端差异：用 view / text；关闭按钮用 view + role="button" + aria-label，点击用 @tap；
   尺寸用 rpx（2rpx ≈ 1px）；五个方向的定位与位移靠样式，不依赖 DOM 测量。 */
import { computed } from 'vue';

const props = defineProps({
  placement: { type: String, default: 'bottom' },
  round: { type: Boolean, default: false },
  open: { type: Boolean, default: false },
  closeOnMask: { type: Boolean, default: true },
  title: { type: String, default: '' }
});
const emit = defineEmits(['close']);

const popupClass = computed(() => [
  `kole-m-popup--${props.placement}`,
  props.round ? 'kole-m-popup--round' : '',
  props.open ? 'is-open' : ''
].filter(Boolean));

const closeLabel = computed(() => (props.title ? '关闭' + props.title : '关闭浮层'));

function onMaskTap() {
  if (!props.closeOnMask) return;
  emit('close');
}

function onCloseTap() {
  emit('close');
}
</script>

<style>
.kole-m-popup {
  --kole-m-popup-max-size: 80%;
  --kole-m-duration-slide: 240ms;
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  position: fixed;
  z-index: 2001;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: var(--kole-m-popup-max-size);
  max-height: var(--kole-m-popup-max-size);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
  transition: transform var(--kole-m-duration-slide) ease-out;
}

.kole-m-popup__mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background-color: var(--kole-color-mask);
  opacity: 0;
  transition: opacity var(--kole-m-duration-slide) ease-out;
}

.kole-m-popup__mask.is-open { opacity: 1; }

.kole-m-popup--center {
  left: 50%;
  top: 50%;
  width: 560rpx;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  border-radius: 16rpx;
}

.kole-m-popup--center.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }

.kole-m-popup--bottom {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  transform: translateY(100%);
}

.kole-m-popup--bottom.is-open { transform: translateY(0); }

.kole-m-popup--top {
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  max-width: none;
  transform: translateY(-100%);
}

.kole-m-popup--top.is-open { transform: translateY(0); }

.kole-m-popup--left {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  max-height: none;
  transform: translateX(-100%);
}

.kole-m-popup--left.is-open { transform: translateX(0); }

.kole-m-popup--right {
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  max-height: none;
  transform: translateX(100%);
}

.kole-m-popup--right.is-open { transform: translateX(0); }

.kole-m-popup--bottom.kole-m-popup--round {
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}

.kole-m-popup--top.kole-m-popup--round {
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
}

.kole-m-popup--left.kole-m-popup--round {
  border-top-right-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
}

.kole-m-popup--right.kole-m-popup--round {
  border-top-left-radius: 16rpx;
  border-bottom-left-radius: 16rpx;
}

.kole-m-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx var(--kole-m-gutter) 16rpx;
  font-size: var(--kole-m-font-size-body);
  font-weight: 500;
}

.kole-m-popup__body {
  flex: 1;
  padding: 0 var(--kole-m-gutter) 32rpx;
  overflow: auto;
  font-size: var(--kole-m-font-size-label);
  color: var(--kole-color-text-secondary);
  line-height: 1.7;
}

.kole-m-popup__close {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--kole-m-touch-target);
  height: var(--kole-m-touch-target);
  margin-right: -24rpx;
  border-radius: 50%;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-body);
}
</style>