elementui 弹窗蒙层模板
//复制过去即可使用，但要注意父组件传过来的方法。
<template>
<!-- 添加管理员 -->
<div class="roleManagements">
<!-- 蒙城 -->
<div class="Mengcheng" @click="remove()"></div>
<el-card class="el-card">
<div slot="header" class="clearfix">
<span>添加管理员</span>
<el-button style="float: right; padding: 3px 0" type="text" class="el-icon-close" @click="remove()"></el-button>
</div>
<!-- 内容区 -->
<div class="content-box"></div>
<!-- 底部按钮 -->
<div class="footer-box">
<!-- 分割线 -->
<el-divider></el-divider>
<div class="footer">
<div class="cancel" @click="remove()">取消</div>
<div class="confirm" @click="confirm()">确定</div>
</div>
</div>
</el-card>
</div>
</template>
<script>
export default {
props: ["newsId"],
data () {
return {
}
},
created () {
},
methods: {
// 父元素传过来的方法, 作用是关闭弹窗。
remove(val) {
this.$emit('roleManagements', val);
}
},
components: {
}
}
</script>
<style scoped lang='less'>
//父容器
.roleManagements {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
//蒙层
.Mengcheng {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
//卡片
.el-card {
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
//内容区
.content-box {
width: 100%;
height: 300px;
overflow: auto;
}
//底部按钮
.footer-box {
width: 90%;
position: absolute;
bottom: 20px;
.footer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
margin-bottom: 20px;
div {
width: 120px;
height: 36px;
text-align: center;
line-height: 36px;
font-size: 16px;
color: #fff;
&:hover {
cursor: pointer;
}
}
//取消
.cancel {
background: rgba(233, 233, 233, 1);
border-radius: 2px;
color: #393939;
}
//确定
.confirm {
background: rgba(82, 196, 205, 1);
border-radius: 2px;
}
}
}
}
}
</style>
