<template>
 <div class="modal" v-show="show" transition="fade">
  <div class="modal-dialog">
   <div class="modal-content">
    <!--头部-->
    <div class="modal-header">
     <slot name="header">
      <p class="title">{{modal.title}}</p>
     </slot>
     <a v-touch:tap="close(0)" class="close" href="javascript:void(0)"></a>
    </div>
    <!--内容区域-->
    <div class="modal-body">
     <slot name="body">
      <p class="notice">{{modal.text}}</p>
     </slot>
    </div>
    <!--尾部,操作按钮-->
    <div class="modal-footer">
     <slot name="button">
      <a v-if="modal.showCancelButton" href="javascript:void(0)" class="button {{modal.cancelButtonClass}}" v-touch:tap="close(1)">{{modal.cancelButtonText}}</a>
      <a v-if="modal.showConfirmButton" href="javascript:void(0)" class="button {{modal.confirmButtonClass}}" v-touch:tap="submit">{{modal.confirmButtonText}}</a>
     </slot>
    </div>
   </div>
  </div>
 </div>
 <div v-show="show" class="modal-backup" transition="fade"></div>
</template> 

.modal {
 position: fixed;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 z-index: 1001;
 -webkit-overflow-scrolling: touch;
 outline: 0;
 overflow: scroll;
 margin: 30/@rate auto;
}
.modal-dialog {
 position: absolute;
 left: 50%;
 top: 0;
 transform: translate(-50%,0);
 width: 690/@rate;
 padding: 50/@rate 40/@rate;
 background: #fff;
}
.modal-backup {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1000;
 background: rgba(0, 0, 0, 0.5);
}

/**
 * modal 模态接口参数
 * @param {string} modal.title 模态框标题
 * @param {string} modal.text 模态框内容
 * @param {boolean} modal.showCancelButton 是否显示取消按钮
 * @param {string} modal.cancelButtonClass 取消按钮样式
 * @param {string} modal.cancelButtonText 取消按钮文字
 * @param {string} modal.showConfirmButton 是否显示确定按钮
 * @param {string} modal.confirmButtonClass 确定按钮样式
 * @param {string} modal.confirmButtonText 确定按钮标文字
 */
props: ['modalOptions'],
computed: {
 /**
  * 格式化props进来的参数,对参数赋予默认值
  */
 modal: {
  get() {
   let modal = this.modalOptions;
   modal = {
    title: modal.title || '提示',
    text: modal.text,
    showCancelButton: typeof modal.showCancelButton === 'undefined' ? true : modal.showCancelButton,
    cancelButtonClass: modal.cancelButtonClass ? modal.showCancelButton : 'btn-default',
    cancelButtonText: modal.cancelButtonText ? modal.cancelButtonText : '取消',
    showConfirmButton: typeof modal.showConfirmButton === 'undefined' ? true : modal.cancelButtonClass,
    confirmButtonClass: modal.confirmButtonClass ? modal.confirmButtonClass : 'btn-active',
    confirmButtonText: modal.confirmButtonText ? modal.confirmButtonText : '确定',
   };
   return modal;
  },
 },
},

data() {
 return {
  show: false, // 是否显示模态框
  resolve: '',
  reject: '',
  promise: '', // 保存promise对象
 };
},
methods: {
 /**
  * 确定,将promise断定为完成态
  */
 submit() {
  this.resolve('submit');
 },
 /**
  * 关闭,将promise断定为reject状态
  * @param type {number} 关闭的方式 0表示关闭按钮关闭,1表示取消按钮关闭
  */
 close(type) {
  this.show = false;
  this.reject(type);
 },
 /**
  * 显示confirm弹出,并创建promise对象
  * @returns {Promise}
  */
 confirm() {
  this.show = true;
  this.promise = new Promise((resolve, reject) => {
   this.resolve = resolve;
   this.reject = reject;
  });
  return this.promise; //返回promise对象,给父级组件调用
 },
},

<!-- template -->
<confirm v-ref:dialog :modal-options.sync="modal"></confirm>
<!-- methods -->
this.$refs.dialog.confirm().then(() => {
 // 点击确定按钮的回调处理
 callback();
 this.$refs.dialog.show = false; 
}).catch(() => {
 // 点击取消按钮的回调处理
 callback();
});

events: {
 /**
  * 转发事件
  * @param {string} eventName 事件名称
  * @param {object} arg  事件参数
  * @return {null}
  */
 'transmit': function (eventName, arg) {
  this.$broadcast(eventName, arg);
 }
},

// 接收事件，获得需要取消和确定按钮的事件名
events: {
 'tip': function(obj) {
  this.events = {
   cancel: obj.events.cancel,
   confirm: obj.events.confirm
  }
 }
}
// 取消按钮
cancel：function() {
 this.$dispatch('transmit',this.events.cancel);
}
// 确定按钮
submit: function() {
 this.$dispatch('transmit',this.events.submit);
}

this.$dispatch('transmit','tip',{
 events: {
  confirm: 'confirmEvent'
 }
});
this.$once('confirmEvent',function() {
 callback();
}

// 确定按钮
ok () {
 this.$emit('ok');
 if (this.closeWhenOK) {
  this.show = false;
 }
},
// 取消按钮
cancel () {
 this.$emit('cancel');
 this.show = false;
},

<modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
 Modal Text
</modal>