vue modal组件,vue的modal使用
传送提供了一种干净的方法，允许我们控制在数字正射影像图中哪个父节点下渲染了HTML，而不必求助于全局状态或将其拆分为两个组件。
目录
1.认识传送2。传送的基本用法
3.第一步优化
4.第二步优化
5.实现情态的组件
1.认识Teleport
像我们如果写情态的组件、消息组件、装载组件这种全局式组件，没有传送的话，将它们引入一个。某视频剪辑软件文件中，则他们的超文本标记语言结构会被添加到组件模板中，这是不够完美的。
没有传送
有传送
下面就实战介绍一下如何用传送开发情态的组件
2.Teleport的基本用法
传送的写法十分简单，只需要用传送/传送将内容包裹，并用到指定将超文本标记语言挂到哪个父节点下，就可以啦。
传送到=#modal
内容
/瞬间移动
3.第一步优化
如果我们在代码中将传送要挂载的数字正射影像图写死，那么每创建一个全局式组件，就需要有一个数字正射影像图节点，会越来越多，并且一直存在，这样的写法不是很优雅。比较好的解决方案就是：
在创建组件的时候，动态创建一个数字正射影像图节点document.createElement()，
并添加到身体中，document.body.appendChild()，
在组件卸载的时候销毁这个dom document.body.removeChild()，
setup(){
const node=文档。createelement( div )
node.id=modal
document.body.appendChild(节点)
未安装(()={
document.body.removeChild(节点)
})
}
4.第二步优化
如果我们后续还要添加消息组件，加载组件等功能，同样要用到瞬间移动，在每一个组件内部都写这么一段代码，实在有点冗余，vue3使我们能够很方便的将逻辑功能提取出来，从而达到逻辑复用的目的。
我们在src-挂钩文件夹下创建useDOMCreate.ts文件，来封装这一块逻辑
//hooks/useDOMCreate.ts
从“vue”导入{未装载的}
函数useDOMCreate(nodeId:string):void {
const node=文档。createelement( div )
node.id=节点编号
document.body.appendChild(节点)
未安装(()={
document.body.removeChild(节点)
})
}
导出默认useDOMCreate
使用：
从导入useDOMCreate./hooks/useDOMCreate
设置（道具、ctx) {
useDOMCreate(modal )
}
5.实现Modal组件
具体封装情态的组件的细节这里就不讲啦，也没有什么复杂的逻辑。直接上代码。
//Modal.vue
模板
传送到=#modal
div class= modal d-block tabindex=-1 v-if=可见
div class=modal-dialog
“模态内容”
div class=modal-header
H5 class= modal-title { title } }/H5
button type= button class= Close data-dissolve= modal aria-label= Close
span aria-hidden= true @ click= on close 次；/span
/按钮
/div
div class=modal-body
插槽/插槽
/div
div class=模态页脚
按钮类型=按钮类= BTN BTN-辅助数据-溶解=模态 @点击=关闭取消/按钮
按钮类型=按钮 class= BTN BTN-主要 @点击=确认确定/按钮
/div
/div
/div
/div
/瞬间移动
/模板
脚本语言
从“vue”导入{定义组件}
从导入useDOMCreate./hooks/useDOMCreate
导出默认定义组件({
名称：莫代尔，
发出：[模型关闭,模型确认],
道具：{
标题：{
类型：字符串，
默认值：""
},
isVisible: {
类型：布尔型，
默认值：错误
}
},
设置（道具、ctx) {
useDOMCreate(modal )
const onClose=()={
ctx.emit(模型-关闭)
}
const onConfirm=()={
ctx.emit(模型-确认)
}
返回{
onClose，
onConfirm
}
}
})
/脚本
使用示例
模板
div class=帖子-详细信息-页面
button type= button class= BTNBTN-危险 @ click=处理删除删除/按钮
模态标题=是否确认删除？:is visible= modal visible @ model-close= hanldeModalClose @ model-confirm= handleModalConfim
p确认要删除这篇文章吗？/p
/modal
/div
/模板
脚本语言
从“vue”导入{定义组件，引用}
从导入模式./components/Modal.vue
导出默认定义组件({
名称：帖子详细信息，
组件：{ Modal }，
setup() {
const modalVisible=ref(false)
const handleDelete=()={
modalVisible.value=true
}
const hanldeModalClose=()={
modalVisible.value=false
}
const handleModalConfim=()={
modalVisible.value=false
.
//后续逻辑处理
}
返回{
hanldeModalClose，
handleModalConfim，
处理删除，
模态可视
}
}
})
/脚本
以上就是某视频剪辑软件基于传送实现情态的组件的详细内容，更多关于某视频剪辑软件传送实现情态的组件的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。