height: 100%;
width: 100%;
z-index: 5;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.dialog-wrapper{
background-color: #eee;
opacity: .9;
}
.dialog-container{
position: fixed;
z-index:80;
top: 10%;
left: 25%;
width: 50%;
/* margin: 0 auto; */
background-color: #eee;
border-radius: 3px;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
span.close-btn{
padding: 0 5px;
float: right;
cursor: pointer;
font-size: 18px;
font-weight: bold;
}
</style>
// 组件使用
//导入模态对话框
import modal from './plugins/dialog'
// 在使用组件
<modal></modal><modal @on-close="closeThis('isShowLog')":is-show='isShowLog'><login></login></modal>
总结
到此这篇关于如何使用vue slot创建一个模态框的文章就介绍到这了,更多相关vue slot创建模态框内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
