uniapp封装一个类似 ElMessageBox.confirm(‘x‘).then(()弹窗，实现js调用即弹出，可await等待用户选择结果 v0.8

html 复制代码

<template>
  <div v-if="visible" class="message-box">
	  <uni-transition mode-class="slide-bottom" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="visible"  >
    <div class="message-box-content">
      <p>{{ message }}</p>
      <div class="message-box-buttons">
        <button @click="handleConfirm">Confirm</button>
        <button @click="handleCancel">Cancel</button>
      </div>
    </div>
    <div class="message-box-overlay" @click="handleOverlayClick"></div>
	 </uni-transition>
  </div>
</template>

<script setup>

import { ref, watch, reactive, onMounted, nextTick, defineProps, toRefs, onUpdated, inject, computed,onUnmounted } from 'vue'
import {
	onLoad,
	onShow
} from "@dcloudio/uni-app";


const props = defineProps({	 
	 message: {
	   type: String,
	   required: true,
	 }
})


    const visible = ref(false);
	const emit = defineEmits(['confirm','cancel']);
    const handleConfirm = () => {
      visible.value = false;
      emit('confirm');
    };

    const handleCancel = () => {
      visible.value = false;
      emit('cancel');
    };

    const handleOverlayClick = () => {
      handleCancel();
    };
	onMounted(() => {
		console.log('来没有')
		visible.value = true
	})
  
  

</script>

<style scoped>
.message-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.message-box-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.message-box-content {
  text-align: center;
}

.message-box-buttons {
  margin-top: 20px;
}

.message-box-buttons button {
  margin: 0 10px;
}
</style>

javascript 复制代码

import { createApp, h } from 'vue';
import MessageBox from './main.vue'

import { resolveDynamicComponent } from 'vue';

let appInstance = null;
let resolveFunc = null;
let rejectFunc = null;

const showMessageBox = (message) => {
	console.log('痰喘')
  return new Promise((resolve, reject) => {
    resolveFunc = resolve;
    rejectFunc = reject;

    const container = document.createElement('div');
    document.body.appendChild(container);

    appInstance = createApp({
      render() {
        return h(resolveDynamicComponent(MessageBox), {
          message,
          onConfirm: () => {
            appInstance.unmount();
            document.body.removeChild(container);
            appInstance = null;
            resolve({res:'同意'});
          },
          onCancel: () => {
            appInstance.unmount();
            document.body.removeChild(container);
            appInstance = null;
             resolve({res:'不同意'});
          },
        });
      },
    });

    appInstance.mount(container);
  });
};

export default {
  confirm: (message) => showMessageBox(message),
};

javascript 复制代码

引入
import MessageModal from "@/pages/tabBar/extCom/message-box/main.js"


方法调用
const confirm =async ()=> {
		try{
			const res =	await  MessageModal.confirm('Are you sure to close this dialog?');
			console.log('弹窗结果是 ', res)
		}catch(e){
			
		}
		
			   
    }