vue动态加载第三方组件,vue动态添加输入框
对话框是很常用的组件，在很多地方都会用到，下面这篇文章主要给大家介绍了关于vue3动态加载对话框的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
目录
简介常规方式使用对话框异步动态加载使用方式TestModal.vue使用结果动态操作对话框的实现DzModalService.tsmain.ts总结
简介
介绍使用vue3的异步组件动态管理对话框组件，简化对话框组件使用方式。本文使用的是vue3、typescript、element_plus完成的示例。
常规方式使用对话框
一般情况下，使用对话框组件，会使用v型车进行双向绑定，通过看得见的变量控制对话框的显示和关闭。常规方式有一个弊端，自定义组件中使用埃尔对话，需要通过父组件控制自定义组件是否展示。
模板
El button type= primary @ click= open general()常规方式打开模态/按钮
埃尔对话
v-model=dialogVisible
title=提示
宽度=30%
:before-close=handleClose
跨度这是一条消息/span
模板#页脚
span class=对话框页脚
El-button @ click=对话框可见=假取消/el-button
El-button type= primary @ click= dialog visible=false
确认/el按钮
/span
/模板
/el-dialog
/模板
脚本安装语言=ts
//此入门模板使用Vue 3脚本安装现场管理系统
//查看https://v3。vuejs。组织/API/sfc-脚本-设置。html # sfc-脚本-设置
从“vue”导入{ ref }；
const dialogVisible=ref(false)
const openGeneral=()={
dialogVisible.value=true
}
/脚本
异步动态加载
先看使用异步组件进行动态加载对话框的方式。异步组件使用到的是定义组件接口，只有使用到这个组件，才会从网络上加载。动态操作使用的使用zModal
使用方式
模板
El button type= primary @ click= openTestModalAsync()动态异步打开测试模式/按钮
/模板
脚本安装语言=ts
从“vue”导入{ defineAsyncComponent，ref }；
从“元素加”导入{ ElMessageBox }；
从导入{ useDzModal } ./dzmodal
//异步加载组件
const TestModalAsync=defineasync component(()=import( ./components/TestModal.vue ))
const dzmodal=useDzModal()
//# 通过dzmodal动态操作对话框
const openTestModalAsync=()={
dzmodal.open(TestModalAsync，{
名称：张三
})。然后(res={
if(res.type===ok){
ElMessageBox.alert(TestModal点击了确定);
}否则{
ElMessageBox.alert(TestModal点击了取消);
}
})
}
/脚本
TestModal.vue
脚本安装语言=ts
从“vue”导入{反应，参考，定义操作}
const emisses=define emisses([ ok ， cancel])
const props=defineProps({
名称：字符串
});
const dialogVisible=ref(true)
const resultData=reactive({
键入：好，
数据：{}
})
/脚本
模板
埃尔对话
v-model=dialogVisible
title=TestModal
宽度=30%
差异通过DzModal打开测试模式/分区
差异外部传入：{{ name }}/div
模板#页脚
span class=对话框页脚
el-button @click=发出(取消，{ })；dialogVisible=false 取消/el-button
el-button type=primary @click=发出( ok ，{ })；dialogVisible=false
确认/el按钮
/span
/模板
/el-dialog
/模板
样式范围
/风格
使用结果
动态操作对话框的实现
动态操作对话框，主要思路是动态创建虚拟数字正射影像图节点，将对话框组件渲染到组件上，核心关键点是要动态创建的节点的上下文为当前应用上下文vm.appContext=this ._应用程序._上下文
DzModalService.ts
从“vue”导入{应用程序，注入，插件，h，渲染}
从“vue”导入{组件选项}；
export const DzModalSymbol=Symbol()
导出类DzModalResult{
键入：确定 取消 字符串=确定
身体？任何=未定义
}
导出DzModalService类{
private _app？应用程序=未定义
构造函数(app:App){
这个. app _ app=app
}
公共开放（模态：组件选项，道具？any):PromiseDzModalResult{
返回新承诺((reslove，reject)={
如果(!这个. app){
拒绝( _app未定义)
返回；
}
const容器=文档。createelement( div )；
document.body.appendChild(容器)
//这里需要合并道具，传入到组件情态的
常数vm=h(模态，{
.道具，
奥诺克：(数据？任何)={
//弹出框关闭时移除节点
document.body.removeChild(容器)
reslove(this.ok(数据));
},
取消：(数据？任何)={
reslove(这个。取消(数据))；
}
});
//这里很重要，关联应用上下文
vm.appContext=this ._应用程序._上下文
渲染(vm，容器);
});
}
公共好吧(数据？any):DzModalResult{
const result=new DzModalResult()；
result.type= ok
result.body=data
返回结果；
}
公开取消（数据？any):DzModalResult{
const result=new DzModalResult()；
result.type=取消
result.body=data
返回结果；
}
}
导出函数useDzModal(): DzModalService {
const dz modal=injectDzModalService(DzModalSymbol)
如果(!dzModal){
抛出新错误("没有提供DzModal！”)
}
返回dzModal
}
常量插件：插件={
安装(app:App，选项？{[key:string]:any}){
const dz modal=new DzModalService(app)
app。配置。全局属性。$ dz modal=dz modal
app.provide(DzModalSymbol，dzModal)
}
}
导出默认插件；
main.ts
从“vue”导入{ createApp }
从导入应用程序 App.vue
从“元素加”导入ElementPlus
导入 element-plus/dist/index.css
从导入DzModal ./dzmodal
创建应用程序。使用(ElementPlus)。使用(DzModal) //安装dzmodal插件。挂载(#应用程序)
总结
使用异步动态加载对话框，父组件无需控制对话框组件的看得见的属性，这样可以简化父组件操作，不在关心对话框组件在什么时间关闭，如果对话框组件需要访问网络，也在子组件中完成。父组件主要做两件事：
通过异步组件方式引入对话框组件打开对话框组件到此这篇关于vue3动态加载对话框的文章就介绍到这了，更多相关vue3动态加载对话框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。