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("自定义确定电话呼叫")       },     }

  }