<template>
<div class="dialog">
 <div class="mask"></div>
 <div class="dialog-content">
  <h3 class="title">{{ modal.title }}</h3>
  <p class="text">{{ modal.text }}</p>
  <div class="btn-group">
   <div class="btn" @click="cancel">{{ modal.cancelButtonText }}</div>
   <div class="btn" @click="submit">{{ modal.confirmButtonText }}</div>
  </div>
 </div>
</div>
</template>

.dialog {
 position: relative;

 .dialog-content {
  position: fixed;
  box-sizing: border-box;
  padding: 20px;
  width: 80%;
  min-height: 140px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background: #fff;
  z-index: 50002;
  .title {
   font-size: 16px;
   font-weight: 600;
   line-height: 30px;
  }
  .text {
   font-size: 14px;
   line-height: 30px;
   color: #555;
  }
  .btn-group {
   display: flex;
   position: absolute;
   right: 0;
   bottom: 10px;
   .btn {
    padding: 10px 20px;
    font-size: 14px;
    &:last-child {
     color: #76D49B;
    }
   }
  }
 }
 .mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 50001;
  background: rgba(0,0,0,.5);
 }
}

export default {
 name: 'dialog',
 props: {
  dialogOption: Object
 },
 data() {
  return {
   resolve: '',
   reject: '',
   promise: '', // 保存promise对象
  }
 },
 computed: {
  modal: function() {
   let options = this.dialogOption;
   return {
    title: options.title || '提示',
    text: options.text,
    cancelButtonText: options.cancelButtonText "htmlcode">

<v-dialog v-show="showDialog" :dialog-option="dialogOption" ref="dialog"></v-dialog>

this.showDialog = true;
this.$refs.dialog.confirm().then(() => {
 this.showDialog = false;
 next();
}).catch(() => {
 this.showDialog = false;
 next();
}) 




源码地址


Dialog组件源码
实现效果




以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。