最近要写个弹框,发现element-ui弹框样式还可以,就copy下来改吧改吧。
html代码
<!--弹框-->
<div class="el-dropdown-menu el-popper" :style="'position: absolute; top:'+listDialogTop+'; left: '+listDialogLeft+'; transform-origin: center top 0px; z-index: 2110;'" >
<!-- 上箭头 -->
<div class="popper__arrow" style="left: 40px;"></div>
<label style="padding: 5px;">任务执行人设置预览</label>
<div id="" v-loading="listLoading" style="padding: 10px;">
这里放你的要显示的内容
</div>
</div>
css代码
.el-dropdown-menu {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
margin: 5px 0;
background-color: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.el-popper .popper__arrow, .el-popper .popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.el-popper .popper__arrow {
border-width: 6px;
-webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .03));
}
.el-popper[x-placement^=bottom] .popper__arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #ebeef5;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
.el-popper .popper__arrow::after {
content: " ";
border-width: 6px;
}