vue3 中自定义弹窗组件

1. 示例

目录:

${root}/
  src/
    dialog/
      Dialog.vue
      dialog.js

Dialog.vue:

<template>
  <div class="dialog">
    <div class="dialog-head">弹框标题</div>
    <div class="dialog-body">弹框内容</div>
  </div>
</template>
<script>
export default {
  props: {
    onMounted: { type: Function, default: () => {/* 此属性用于新建组件时传递引用 */} }
  },

  mounted() {
    this.onMounted(this);
  },
}
</script>

dialog.js:

import { createApp } from 'vue';
import Dialog from './Dialog.vue';

let componentRef;

const app = createApp(Dialog, {
  onMounted(ref) {
    componentRef = ref;
  },
});

const mountedNode = document.createElement('div');
document.body.appendChild(mountedNode);
app.mount(mountedNode);

2. 参考

• vue3.2自定义弹窗组件+函数式调用二合一 (opens new window)