vue 小知识总结 ------ 自定义公共弹窗

1 新建弹窗组件文件 selfToast.vue

主体内容：
<!-- template -->
<template>
    <transition name="main-bg-fade">
        <div class="toastMain" v-show="showToast">
            <transition name="content-slide-fade">
                <div class="contentMain" v-show="showToast">
                    <x-icon type="ios-close-empty" size="30" v-on:click="closeModel()" class="closeModel"></x-icon>
                    <div class="title">{{toastModelOptions.title || "自定义提示"}}</div>
                    <div class="message textCenter">
                        {{toastModelOptions.message || " "}}
                    </div>
                    <div class="btns">
                        <div class="buttonSubmit" @click="toastSubmit()">
                         {{toastModelOptions.btnSubmitText || "确定"}}
                        </div>
                        <div class="buttonSubmit" @click="toastCancel()">
                            {{toastModelOptions.btnCancelText || "取消"}}
                        </div>
                    </div>
                </div>
            </transition>    
        </div>
    </transition>    
</template>

selfToast.vue script部分
<!-- script -->
export default {
    props: ["toastModelOptions"],
    data() {
      return {
        showToast: false,   // 是否显示模态框
      }
    },
    methods: {
      closeModel: function () {
        this.showToast = false;
      },
      showModel: function () {
        this.showToast = true;
      },
      confirmSubmit: function () {
        this.showToast = false;
        if(typeof (this.toastModelOptions.btnSubmitFunction)==='function'){
          this.toastModelOptions.btnSubmitFunction()
        }
      },
      confirmCancel: function () {
        this.showToast = false;
        if(typeof (this.toastModelOptions.btnCancelFunction)==='function'){
          this.toastModelOptions.btnCancelFunction()
        }
      },
    }
  }

selfToast.vue css部分

<style scoped>
.toastMain {
  border: 1px solid red;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 2;
}
.contentMain {
  margin: 0 auto;
  text-align: center;
  margin-top: 65%;
  position: relative;
  width: 80%;
  background: #fff;
}
.closeModel {
  position: absolute;
  right: 0.3rem;
  fill: #fff;
}
.title {
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.36rem;
  background: #7da2da;
  color: #fff;
}
.textCenter {
  height: 1.6rem;
  line-height: 0.8rem;
  color: #595959;
  font-size: 0.38rem;
}
.btns {
  padding-bottom: 0.3rem;
}
.buttonSubmit,.buttonSubmit {
  height: 0.7rem;
  width: 1.5rem;
  background: #7da2da;
  border-radius: 8%;
  color: #fff;
}

</style>

组件引入：

要使用组件的文件引入公用弹窗组件
<!-- template -->
  <self-toast v-bind:toastModelOptions="toastOptions" ref="templateToastOptions"></self-toast>
  <!-- script -->
  import  selfToast from './selfToast';
  export default{
    components: {
      selfToast
    },
    <!-- methods -->
    toastOptions:{
      title: "拨打电话",//提示
      message: "13567875656",//""
      btnCancelText: "取消",//取消
      btnSubmitText: "呼叫",//确定
         btnSubmitFunction: function () {
        alert("自定义确定电话呼叫")
      },
    }

  }