本文介绍在Vue3中摒弃extend方法后，如何通过动态创建应用实例的方式实现全局JS调用弹窗组件。详细讲解了Dialog.vue模板编写、index.js中Dialog类的封装以及main.js中的全局注册步骤，提供了一套亲测可用的完整解决方案。
前言
在Vue2架构中，开发者通常利用extend方法封装支持通过JavaScript直接调用的全局弹窗组件。
然而，Vue3已不再支持extend方法，因此需要探索在Vue3新架构下封装此类组件的具体实现路径。
第一步：编写组件模板
首先在components目录下创建名为dialog的文件夹，并在该文件夹内新建Dialog.vue和index.js两个文件。
Dialog.vue文件的具体实现如下：
<template>
<div class="self-dialog">
<el-dialog
v-model="dialogData.show"
:title="dialogData.title"
:close-on-click-modal="false"
:close-on-press-escape="false"
destroy-on-close
:width="dialogData.width"
:before-close="handleClose"
>
<span>{{ dialogData.content }}</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { inject, getCurrentInstance, computed } from 'vue'
const config = inject('config')
const { proxy } = getCurrentInstance()
const dialogData = computed(() => {
let defaultData = {
show: false,
content: '',
width: '800px',
title: '弹窗',
onConfirm: () => {},
onCancel: () => {}
}
return {
...defaultData,
...config
}
})
const handleClose = () => {
dialogData.value.onCancel()
document.body.removeChild(proxy.$el.parentNode)
}
const handleConfirm = () => {
dialogData.value.onConfirm()
document.body.removeChild(proxy.$el.parentNode)
}
</script>index.js文件负责封装调用逻辑，具体代码如下：
import { createApp } from 'vue'
import dialog from './Dialog.vue'
class Dialog {
constructor() {
this.instance = null
this.mountDom = document.createElement('div')
}
show(options) {
this.instance && this.instance.unmount()
this.instance = createApp(dialog)
this.instance.provide('config', options)
this.instance.mount(this.mountDom)
document.body.appendChild(this.mountDom)
}
hide() {
this.instance && this.instance.unmount()
}
}
export default new Dialog()最后在main.js中进行全局配置，具体代码如下：
// js调用全局弹窗
import Dialog from './components/dialog/index.js'
app.config.globalProperties.$dialog = Dialog完成上述配置后，即可在Vue组件中通过JavaScript方式直接调用弹窗。
总结
以上介绍了在Vue3中实现全局JS调用弹窗组件的方法。如需了解更多相关技术细节，建议查阅本站过往文章或继续浏览后续内容，感谢支持。