1.新建一个新组件命名命名为alertBox.vue
一.dom结构
<!--删除弹框-->
<div class="paymentdetail_compontents" v-if="isShowDialogs">
<div class="paymentdetail_div_box">
<div class="paymentdetail_div1">
<span class="paymentdetail_div1_warn">提示</span>
<div class="paymentdetail_person_box">{{Message}}</div>
</div>
<div class="paymentdetail_div2">
<span class="paymentdetail_div2_span" @click="isShowRefruct">否</span>
<span class="paymentdetail_div2_span1" @click="isShowAgree">是</span>
</div>
</div>
</div>
二.script
<script>
export default {
props: ["isshowAlert", "Message"],
data() {
return {
isShowDialogs: true
};
},
methods: {
isShowRefruct() {
this.isShowDialogs = false;
this.$emit("replaceChecked", "replace");
},
isShowAgree() {
this.isShowDialogs = false;
this.$emit("sureChecked", this.Message);
}
},
watch: {
isshowAlert() {
this.isShowDialogs = this.isshowAlert;
}
}
};
</script>
三样式
.paymentdetail_compontents {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 33333;
background-color: rgba(0, 0, 0, 0.6);
/* display: flex; */
.paymentdetail_div_box {
width: 300px;
background-color: white;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.paymentdetail_div1 {
height: 90px;
text-align: center;
margin-top: 20px;
.paymentdetail_person_box {
height: 50px;
margin-top: 20px;
color: #685c5c;
}
.paymentdetail_div1_warn {
color: #000;
font-family: bolder;
}
}
.paymentdetail_div2 {
border-top: 1px solid #eee;
/* display: flex; */
span {
/* flex: 1; */
height: 39px;
line-height: 39px;
color: #5077aa;
text-align: center;
width: 50%;
}
.paymentdetail_div2_span {
border-right: 1px solid #eee;
color: #685c5c;
float: left;
box-sizing: border-box;
}
.paymentdetail_div2_span1 {
float: right;
}
}
}
}
4.使用props接收从父组件中接收的值
props: ["isshowAlert", "Message"],
5.在watch中监听弹框是否出现
isshowAlert() {
this.isShowDialogs = this.isshowAlert;
}
6.父组件中引入组件
1.import alertbox from "./alertBox";
2. components: {
alertbox
},
3.dom结构
<alertbox :isshowAlert="showAlert" :Message="alertMessage" @replaceChecked="replace_checked" @sureChecked="sure_checked"></alertbox>
4.
data() {
return {
showAlert: "",
alertMessage: "你好"
};
}
5.
methods: {
replace_checked() {
console.log(2222222);
},
sure_checked() {
console.log(1111111);
}
}
