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

<template>
  <view>
    <view class="kole-m-dialog__mask" :class="{ 'is-open': open }" aria-hidden="true" @tap="onMaskTap"></view>
    <view
      class="kole-m-dialog"
      :class="dialogClass"
      role="dialog"
      aria-modal="true"
      :aria-label="title"
      :data-close-on-mask="closeOnMask ? 'true' : 'false'"
    >
      <view class="kole-m-dialog__header"><text>{{ title }}</text></view>
      <view class="kole-m-dialog__body"><slot></slot></view>
      <view class="kole-m-dialog__footer">
        <view
          v-if="variant === 'confirm'"
          class="kole-m-dialog__btn"
          role="button"
          @tap="onCancelTap"
        ><text>{{ cancelText }}</text></view>
        <view
          class="kole-m-dialog__btn"
          :class="tone === 'danger' ? 'kole-m-dialog__btn--danger' : 'kole-m-dialog__btn--primary'"
          :role="confirmDisabled ? '' : 'button'"
          :aria-disabled="confirmDisabled ? 'true' : 'false'"
          @tap="onConfirmTap"
        ><text>{{ confirmText }}</text></view>
      </view>
    </view>
  </view>
</template>

<script setup>
/* uni-app 端 · 对话框（移动端）— 规格 §13
   跨端差异：用 view / text；按钮用 view + role="button"（小程序无 <button> 的行内语义，
   role 在 H5 产物里生效），点击用 @tap；尺寸用 rpx（2rpx ≈ 1px）。 */
import { computed } from 'vue';

const props = defineProps({
  variant: { type: String, default: 'confirm' },
  tone: { type: String, default: 'default' },
  round: { type: Boolean, default: false },
  open: { type: Boolean, default: false },
  closeOnMask: { type: Boolean, default: true },
  title: { type: String, default: '' },
  confirmText: { type: String, default: '确定' },
  cancelText: { type: String, default: '取消' },
  confirmDisabled: { type: Boolean, default: false }
});
const emit = defineEmits(['confirm', 'cancel']);

const dialogClass = computed(() => [
  props.round ? 'kole-m-dialog--round' : '',
  props.open ? 'is-open' : ''
].filter(Boolean));

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

function onCancelTap() {
  emit('cancel');
}

function onConfirmTap() {
  if (props.confirmDisabled) return;
  emit('confirm');
}
</script>

<style>
.kole-m-dialog {
  --kole-m-dialog-width: 80%;
  --kole-m-touch-target: 88rpx;
  --kole-m-action-height: 112rpx;
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-title: 34rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2001;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: var(--kole-m-dialog-width);
  max-height: 70%;
  transform: translate(-50%, -50%);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-dialog--round {
  border-radius: 16rpx;
  overflow: hidden;
}

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

.kole-m-dialog__mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background-color: var(--kole-color-mask);
  opacity: 0;
}

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

.kole-m-dialog__header {
  padding: 40rpx var(--kole-m-gutter) 16rpx;
  color: var(--kole-color-text-title);
  font-size: var(--kole-m-font-size-title);
  text-align: center;
}

.kole-m-dialog__body {
  flex: 1;
  padding: 0 var(--kole-m-gutter) 40rpx;
  overflow: auto;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
  text-align: center;
}

.kole-m-dialog__footer {
  display: flex;
  border-top: 2rpx solid var(--kole-color-border);
}

.kole-m-dialog__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--kole-m-action-height);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-dialog__btn--danger { color: var(--kole-color-error); }
.kole-m-dialog__btn--primary { color: var(--kole-color-brand); }
</style>