1.新建一个新组件命名命名为alertBox.vue
一.dom结构
提示
否
是
二.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;
}
}
};
三样式
.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结构
4.
data() {
return {
showAlert: "",
alertMessage: "你好"
};
}
5.
methods: {
replace_checked() {
console.log(2222222);
},
sure_checked() {
console.log(1111111);
}
}