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){
			
		}
		
			   
    }
相关推荐
非凡ghost16 分钟前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns1 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
CsharpDev-奶豆哥1 小时前
JavaScript性能优化实战大纲
开发语言·javascript·性能优化
专注前端30年1 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
00后程序员张1 小时前
如何提高 IPA 安全性 多工具组合打造可复用的 iOS 加固与反编译防护体系(IPA 安全 iOS 加固 无源码混淆 Ipa Guard 实战)
android·安全·ios·小程序·uni-app·iphone·webview
烛阴1 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心1 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart2 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter
Yeats_Liao2 小时前
Go Web 编程快速入门 13 - 部署与运维:Docker容器化、Kubernetes编排与CI/CD
运维·前端·后端·golang
Yeats_Liao2 小时前
Go Web 编程快速入门 14 - 性能优化与最佳实践:Go应用性能分析、内存管理、并发编程最佳实践
前端·后端·性能优化·golang