exam_mp/components/Modal/Modal.vue

<script setup>
import { ref, watchEffect, nextTick } from "vue";

const popup = ref(null);

const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  backgroundColor: {
    type: String,
    default: "#fff",
  },
  width: {
    type: String,
    default: "600rpx",
  },
  height: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  footer: {
    type: Boolean,
    default: true,
  },
  onClose: {
    type: Function,
    default: () => {},
  },
  onSubmit: {
    type: Function,
    default: () => {},
  },
  submitter: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["update:open"]);

const onChange = (e) => {
  emit("update:open", e.show);
};

const close = () => {
  emit("update:open", false);
};

const c = async (fn) => {
  const res = await fn();
  if (res) {
    close();
  }
};

watchEffect(() => {
  // 监听这两个函数
  popup.value;
  props.open;
  nextTick(() => {
    if (props.open) {
      popup.value?.open?.();
    } else {
      popup.value?.close?.();
    }
  });
});

defineExpose({
  popup,
});
</script>

<template>
  <uni-popup
    ref="popup"
    @change="onChange"
    v-bind="$attrs"
    background-color="transparent"
  >
    <slot name="custom">
      <view
        class="popup-content"
        :style="{
          backgroundColor,
          width,
          height,
        }"
      >
        <view class="title">
          <slot name="title">{{ title }}</slot>
          <uni-icons type="closeempty" class="icons" @click="close"></uni-icons>
        </view>
        <view class="content">
          <slot></slot>
        </view>
        <view v-if="footer" class="footer">
          <slot name="footer">
            <button class="plain" @click="c(onClose)">
              {{ submitter.closeText || "取消" }}
            </button>
            <button class="primary" @click="c(onSubmit)">
              {{ submitter.text || "确定" }}
            </button>
          </slot>
        </view>
      </view>
    </slot>
  </uni-popup>
</template>

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

.popup-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  gap: 20rpx;
  padding: 20rpx;
  border-radius: 10rpx;

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #000000;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10rpx;

    .icons {
      position: absolute;
      right: 0;
      top: -10rpx;
    }
  }

  .content {
    width: 100%;
    flex: 1;
  }

  .footer {
    display: flex;
    gap: 20rpx;
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;

    button {
      flex: 1;
      font-family: PingFang SC, PingFang SC;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      border: 1rpx solid $primary;
      background-color: transparent;
      font-weight: 500;
      font-size: 32rpx;
      &::after {
        border: 0;
      }
    }

    .plain {
      background: $uni-primary-light;
      color: $primary;
    }

    .primary {
      background: $primary;
      color: #fff;
    }
  }
}
</style>