如何使用vue.js构造modal组件
答案:1 悬赏:50 手机版
解决时间 2021-03-14 09:58
- 提问者网友：ミ烙印ゝ
- 2021-03-14 02:35
如何使用vue.js构造modal组件
最佳答案
- 五星知识达人网友：长青诗
- 2021-03-14 03:13
基本上每个项目都需要用到模态框组件，由于在最近的项目中，alert组件和confirm是两套完全不一样的设计，所以我将他们分成了两个组件，本文主要讨论的是confirm组件的实现。
组件结构
模态框结构分为三部分，分别为头部、内部区域和操作区域，都提供了slot，可以根据需要定制。
样式
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1001;
-webkit-overflow-scrolling: touch;
outline: 0;
overflow: scroll;
margin: 30/@rate auto;
}
.modal-dialog {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,0);
组件结构
模态框结构分为三部分，分别为头部、内部区域和操作区域，都提供了slot，可以根据需要定制。
样式
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1001;
-webkit-overflow-scrolling: touch;
outline: 0;
overflow: scroll;
margin: 30/@rate auto;
}
.modal-dialog {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%,0);
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
大家都在看
推荐资讯