1.新建一個新組件命名命名為alertBox.vue
? ? ?一.dom結(jié)構(gòu)
? ? ?<!--刪除彈框-->
? ? <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中監(jiān)聽彈框是否出現(xiàn)
isshowAlert() {
? ? ? this.isShowDialogs = this.isshowAlert;
? ? }
6.父組件中引入組件
1.import alertbox from "./alertBox";
2. components: {
? ? alertbox
? },
3.dom結(jié)構(gòu)
<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);
? ? }
? }
