vue弹出框的封装

依旧是百度不到自己想要的，就自己动手丰衣足食

弹出框做成单独的组件confirm.vue;

<template>    <transition name="mask-bg-fade">        <div class="mask" v-show="show">            <div class="mask_bg"></div>            <transition name="slide-fade">                <div class="modelBox" v-show="show">                    <div class="tipIcon" v-bind:class="confirmModalOptions.type||'warning'"></div>                    <div class="closeModel" v-on:click="closeModel()"></div>                    <div class="title">{{confirmModalOptions.title || "提示"}}</div>                    <div class="message textCenter">{{confirmModalOptions.message || " "}}</div>                    <div class="model_btnBox">                        <button class="dh_button_default2" v-on:click="confirmCancel()">                            {{confirmModalOptions.btnCancelText || "取消"}}                        </button>                        <button class="dh_button_blue" v-on:click="confirmSubmit()">                            {{confirmModalOptions.btnSubmitText || "确定"}}                        </button>                    </div>                </div>            </transition>        </div>    </transition></template><script>  export default {    props: ["confirmModalOptions"],    data() {      return {        show: false,   // 是否显示模态框      }    },    methods: {      closeModel: function () {        this.show = false;      },      showModel: function () {        this.show = true;      },      confirmCancel: function () {        this.show = false;        if(typeof (this.confirmModalOptions.btnCancelFunction)==='function'){          this.confirmModalOptions.btnCancelFunction()        }      },      confirmSubmit: function () {        this.show = false;        if(typeof (this.confirmModalOptions.btnSubmitFunction)==='function'){          this.confirmModalOptions.btnSubmitFunction()        }      }    }  }</script><style lang="scss"></style>

页面

<d-confirm v-bind:confirmModalOptions="confirmOptions" ref="myConfirm"></d-confirm>

import  DConfirm from 'components/confirm';
components: {  DPromise,},

del: function () {  this.$refs.myConfirm.showModel();  this.confirmOptions= {    type: "warning",//warning    title: "提示",//提示    message: "文字内容",//""    btnCancelText: "取消",//取消    btnSubmitText: "确定",//确定    btnSubmitFunction: function () {      alert("确定")    },    btnCancelFunction: function () {      alert("取消")    }  }},

添加了两个过度效果，背景和弹出框是分开的不同效果，自己可以再封装成一个甚至多个按钮的弹出框，自己就是遇到一些比较麻烦的问题，希望大神指导学习学习，

至于css样式就大家自己写吧；

欢迎批评指正