vue3自定义dialog createApp setup语法组件使用element

目录

 index.vue

<template>
  <el-dialog
    center
    v-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);

    })
}