Vue3将弹窗封装到插件里调用

最新推荐文章于 2024-08-30 15:26:46 发布

Vgbire

最新推荐文章于 2024-08-30 15:26:46 发布

阅读量1.2k

点赞数

文章标签： Vue3 插件 vue 弹窗

本文链接：https://blog.csdn.net/RkHker/article/details/112281004

版权

本文探讨了Vue3环境下如何封装弹窗插件，介绍了两种实现方式：一是使用Vue.extend的替代方案，二是通过createApp并导入相关组件和库来确保Vue3兼容。着重讲述了为何需要额外导入axios和Element Plus，并提出了改进方法的邀请。

摘要由CSDN通过智能技术生成

Vue2封装

Vue2封装弹窗插件比较简单快捷使用Vue.extend方法就可以了。

import MessageDialog from './MessageDialog.vue'

export default {
	install: Vue => {
		const DialogConstructor = Vue.extend(MessageDialog)
		const instance = new DialogConstructor()
		instance.$mount(document.createElement('div'))
		document.body.appendChild(instance.$el)
		Vue.prototype.$dialog = (payload) => {
			instance.open(payload)
		}
	}
}

Vue3封装

但是Vue3移除了Vue.extend，只能通过其他方式去封装弹窗插件。我个人探索了好一会找到的方法。

import { createApp } from 'vue'
import MessageDialog from './MessageDialog.vue'
import { axios } from 'axios'
import { ElDialog, ElButton } from 'element-plus'

const instance = createApp(MessageDialog)
instance.component(ElDialog.name, ElDialog)
instance.component(ElButton.name, ElButton)
instance.use(axios, { target: instance.config.globalProperties.$http = {} })
const vm = instance.mount(document.createElement('div'))
document.body.appendChild(vm.$el.nextSibling)

export default {
	install: app => {
		app.config.globalProperties.$dialog = (payload) => {
			vm.open(payload)
		}
	}
}

上面的代码有些地方可能大家看的比较迷惑，为什么还要导入axios和ElDialog。如果不这么做，Vue3会报ElDialog无法识别、MessageDialog里面有发送请求的操作，会提示axios无效。因为我们使用creatApp的方式新创建了一个app实例，与main.js创建的实例毫无关系。所以弹窗组件用到什么都要导入一次。
我这种方法实际不太科学，应该有更好的方法去实现，欢迎提出更好的解决办法在下面。