subject_gxj/xj_project_app_2024_2_18/components/cu-dialog.vue

<!--
 * @Author: colpu ycg520520@qq.com
 * @Date: 2024-07-29 19:04:06
 * @LastEditors: colpu ycg520520@qq.com
 * @LastEditTime: 2024-07-30 12:40:44
 * @FilePath: /xj_project_app_2024_2_18/components/cu-dialog.vue
 * @Description: 
-->
<template>
  <uni-popup
    ref="popupDialog"
    type="dialog"
    @change="onChange"
    @maskClick="onClose"
  >
    <view class="colpu__popup-body" @tap.stop="">
      <view class="colpu__popup-title" v-if="title"
        >{{ title }}
        <view class="colpu__popup-desc" v-if="desc">{{ desc }}</view>
      </view>
      <uni-icons
        type="closeempty"
        @click="popupDialog.close"
        class="colpu__popup-close"
        size="20"
      />
      <slot></slot>
    </view>
  </uni-popup>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const popupDialog = ref();
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  desc: {
    type: String,
    default: "",
  },
});
const $emit = defineEmits({
  close: null,
  confirm: null,
});

const onChange = (evt: any) => {
  const { show, type } = evt;
  console.log("=======>", show, type);
  if (show) {
    $emit("open", evt);
  } else {
    $emit("close", evt);
  }
};
const onClose = () => {
  $emit("close");
};

defineExpose({
  open: () => {
    console.log("------open");
    popupDialog.value.open();
  },
  close: () => {
    popupDialog.value.close();
  },
});
</script>
<style lang="scss" scoped>
.colpu__popup-body {
  min-width: 640rpx;
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  padding: 30rpx 20rpx;
  border-radius: 12rpx;
  background-color: #fff;
}
.colpu__popup-close {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  top: 24rpx;
  right: 20rpx;
}
.colpu__popup-title {
  margin: 0 20rpx;
  font-size: 36rpx;
  line-height: 40rpx;

  margin-bottom: 20rpx;
  text-align: center;
}
.colpu__popup-desc {
  margin: 0 20rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  text-align: center;
  color: #999;
}
</style>