好资源导航 » 文章资讯 » 如何使用vue slot创建一个模态框的实例代码

如何使用vue slot创建一个模态框的实例代码

2023-07-24 07:27:03 64

【1】遮罩层：承载内容，管理样式布局。

【2】内容层：控制遮罩层的显示与否。

遮罩层和内容区之间应该解耦。遮罩层和内容区之间应该解耦。遮罩层和内容区之间应该解耦。

遮罩层不依赖于内容区，内容是放置在遮罩层里的，至于内容区里的内容是什么，遮罩层完全不用在意。因此可以在遮罩层里采用插槽。

遮罩层的实现


.common-mask{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:rgba($color:#000000,$alpha:0.75);
display:flex;
justify-content:center;
align-content:center;
z-index:4;
}

内容层的实现


head

body

PS:vue组件模态框实现方式

//组件代码

//组件使用

//导入模态对话框
importmodalfrom'./plugins/dialog'
//在使用组件

总结

到此这篇关于如何使用vueslot创建一个模态框的文章就介绍到这了,更多相关vueslot创建模态框内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
514930285
czq8825@qq.com

如何使用vue slot创建一个模态框的实例代码

热门推荐

随机推荐