目录

 index.vue

<template><el-dialogcenterv-model="isVisible"width="650px":title="title":append-to-body="true"><div id="dialogMap_container"></div><template #footer><span class="dialog-footer"><el-button @click="cancel()">取消</el-button><el-button type="primary" @click="comfirm"> 确认 </el-button></span></template></el-dialog>
</template><script setup>import { shallowRef } from "@vue/reactivity";
import { ref, onMounted, onUnmounted, nextTick, computed, watch } from "vue";import { defineProps, defineExpose, defineEmits } from "vue";
const isVisible = ref(false);
let map = shallowRef(null);
let amap = shallowRef(null);
const { title, position } = defineProps({title: {type: String,default: "标题",},position: {type: String,default: "文本",},
});
// 定义emits
const emit = defineEmits(["comfirm", "closed"]);
function comfirm() {isVisible.value = false;emit("comfirm", "地图经纬度");
}
function cancel() {isVisible.value = false;emit("closed", "地图经纬度2");
}
function init(params) {isVisible.value = true;
}onMounted(() => {init();});
</script><style scoped>
#dialogMap_container{
width: 600px;
height: 400px;
}
</style>

mapDialog.js

import menuElement from "./index.vue";
/* myMsgBox.js */
import ElementPlus from 'element-plus';
import {h,ref,createApp
} from "vue";export const addMenu = function ( title, position) {return new Promise((resolve, reject) => {let mymenuRef = ref();const mountNode = document.createElement('div');document.body.appendChild(mountNode);const app = createApp({render() {return h(menuElement, {ref: mymenuRef,// 参数title: title,position: position,// 事件onComfirm: (data) => {resolve(data);},onClosed: () => {setTimeout(() => {mountNode.remove();}, 500);reject();}})}});// 由于内部使用了el-dialog所以必须挂载否则解析错误app.use(ElementPlus);let instance = app.mount(mountNode);})
}