<template>
<div v-show="isPromptBox" class="prompt-box-popup">
<div class="popup">
<div class="popup-title">
<span>{{ title }}</span>
<span class="iconfont iconguanbi" @click="close"></span>
</div>
<div class="popup-main">
<span :class="'iconfont ' + icon" :style="'color:' + iconColor"></span>
<p>{{ content }}</p>
</div>
<div class="popup-footer">
<div class="footerBtn" :style="BtnLeftStyle" @click="BtnLeftF()">
{{ BtnLeft }}
</div>
<div class="footerBtn" :style="BtnRightStyle" @click="BtnRightF()">
{{ BtnRight }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
isPromptBox: {
type: Boolean,
required: true
},
promptBoxObj: {
type: Object,
required: false
}
},
watch: {
promptBoxObj(val) {
this.title = val.title || this.title;
this.icon = val.icon || this.icon;
this.iconColor = val.iconColor || this.iconColor;
this.content = val.content || this.content;
this.BtnLeft = val.BtnLeft || this.BtnLeft;
this.BtnRight = val.BtnRight || this.BtnRight;
this.BtnLeftStyle = val.BtnLeftStyle || this.BtnLeftStyle;
this.BtnRightStyle = val.BtnRightStyle || this.BtnRightStyle;
}
},
data() {
return {
title: "提示框",
icon: "iconalter",
iconColor: "#f33249",
content: "这里放内容",
BtnLeft: "取消",
BtnRight: "确定",
BtnLeftStyle: "background:#2890fa;border-color:#2890fa;color:#ffffff;",
BtnRightStyle: "background:#ffffff;border-color:#D0021B;color:#D3081D;"
};
},
methods: {
BtnRightF() {
this.$emit("update:isPromptBox", false);
},
BtnLeftF() {
this.$emit("update:isPromptBox", false);
},
close() {
this.$emit("update:isPromptBox", false);
}
}
};
</script>
<style lang="less" scoped>
.prompt-box-popup {
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 200;
.popup {
position: absolute;
left: 25%;
top: 25%;
width: 720px;
height: 400px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
.popup-title {
height: 48px;
line-height: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
color: #303133;
text-align: center;
.iconfont {
font-size: 14px;
color: #91949a;
position: absolute;
right: 13px;
cursor: pointer;
}
}
.popup-main {
text-align: center;
margin: auto;
margin-top: 47px;
overflow: auto;
height: 200px;
.iconfont {
font-size: 48px;
}
}
.popup-footer {
position: absolute;
width: 100%;
bottom: 40px;
text-align: center;
.footerBtn {
width: 120px;
height: 40px;
line-height: 40px;
border-radius: 4px;
border: 1px solid;
display: inline-block;
cursor: pointer;
}
.footerBtn + .footerBtn {
margin-left: 88px;
}
}
}
}
</style>
<template>
<div class="enterprise-member">
<!-- 删除按钮 -->
<i class="el-icon-delete pointer-hands" @click="deleteF(scope.row)" ></i>
<!-- 提示框 -->
<ConfirmationBox
:isPromptBox.sync="isConfirmationBox"
:promptBoxObj="ConfirmationBoxObj"
@ReturnData="ReturnData"
></ConfirmationBox>
</div>
</template>
<script>
// 引入组件
import ConfirmationBox from "@/components/popup/ConfirmationBox";
export default {
components: {ConfirmationBox},
data() {
return {
// 提示框
isConfirmationBox: false,
ConfirmationBoxObj: {},
};
},
methods: {
// 返回数据
ReturnData(data) {
switch (data.type) {
case "delete":
if (data.btn === "right") {
this.deleteF(data);
}
break;
}
},
// 删除
delete(data) {
if (data.btn === "right") {
// 调取接口
} else {
// 弹出窗口
this.isConfirmationBox = true;
this.ConfirmationBoxObj = {
data: data,
title: "删除确认",
type: "delete",
content: "是否确认删除",
BtnLeftStyle:
"background:#ffffff;border-color:#2890fa;color:#2890fa;",
BtnRightStyle:
"background:#2890fa;border-color:#2890fa;color:#ffffff;"
};
}
},
}
};
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/cf543597d2edbfa0175e4a604cf15c34.png)