workApp/components/customDialog.vue

<template>
  <uni-popup ref="popupRef" type="center" :mask-click="false">
    <view class="custom_dialog">
      <!-- 标题 -->
      <view class="dialog_header" v-if="title">
        <text class="dialog_title">{{ title }}</text>
        <!-- <view class="close_icon" @click="close">✕</view> -->
      </view>
      
      <!-- 内容区域 -->
      <view class="dialog_body">
        <slot></slot>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue';
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
const props = defineProps({
  title: {
    type: String,
    default: '提示'
  }
});

const emit = defineEmits(['confirm', 'close']);
const popupRef = ref(null);

const open = () => {
  popupRef.value?.open();
};

const close = () => {
  popupRef.value?.close();
  emit('close');
};

const handleConfirm = () => {
  // 发射事件，父组件处理逻辑
  // 父组件如果验证失败，不调用 close() 即可保持弹窗打开
  emit('confirm', { close });
};

defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.custom_dialog {
  width: 330px;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dialog_header {
  position: relative;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid #eee;
  
  .dialog_title {
    font-size: 22rpx;
    // font-weight: bold;
    color: #333;
  }
  
  .close_icon {
    position: absolute;
    right: 30rpx;
    top: 10rpx;
    font-size: 40rpx;
    color: #999;
    padding: 10rpx;
  }
}

.dialog_body {
  padding: 20rpx;
  min-height: 200rpx;
  height: auto;
  overflow:hidden;
}

.dialog_footer {
  display: flex;
  border-top: 1rpx solid #eee;
  
  .btn {
    flex: 1;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 32rpx;
    margin: 0;
    border-radius: 0;
    background-color: #fff;
    
    &::after {
      border: none;
    }
  }
  
  .cancel_btn {
    color: #666;
    border-right: 1rpx solid #eee;
  }
  
  .confirm_btn {
    color: #2E64FA;
    font-weight: bold;
  }
}
</style>