vue 封装dialog_vue自定义封装弹框组件

1.新建一个新组件命名命名为alertBox.vue

一.dom结构

提示

{{Message}}

否

是

二.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);

}

}