效果展示.png

1、在src下新建extend文件夹，extend下新建confirm文件夹，页面结构如下：

页面结构.png

<template>
  <el-dialog width="450px" :title="content.title" :visible.sync="content.show" v-if="isShow" :modal="false" :show-close="false" :close-on-click-modal="false">
    <div class="container flex-center">
      <div class="message-type" :class="content.iconClass ? content.iconClass : 'el-icon-warning'" :style="{'color': content.iconColor ? content.iconColor : '#FE8A23'}"></div>
      <div class="message-box">
        <p v-if="content.isHtmlText" v-html="content.message"></p>
        <p v-else v-text="content.message"></p>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button plain class="plain-btn" @click="cancel">{{ content.cancelText || '取消' }}</el-button>
      <el-button type="primary" @click="confirm">{{ content.confirmText || '确定' }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      // 弹窗内容
      isShow: true,
      content: {
        title: "",
        message: "",
        show: false,
        isHtmlText: false, // 是否使用html
        iconClass: '', // 图标类名
        iconColor: '', // 图标颜色
        confirmText: '', // 确认按钮文案
        cancelText: '', // 取消按钮文案
      }
    };
  },
  methods: {
    cancel() {},
    confirm() {},
  },
}
</script>

<style lang="scss" scoped>
.container {
  .message-type {
    font-size: 24px!important;
  }
  .message-box {
    font-size: 14px;
    color: #333;
    padding-left: 12px;
    padding-right: 12px;
  }
}
</style>

3、开始编写index.js文件，代码如下：

import Vue from 'vue';
import confirm from './index.vue';
let confirmConstructor = Vue.extend(confirm);
function theConfirm (content) {
  return new Promise((res, rej) => {
    let confirmDom = new confirmConstructor({
      el: document.createElement('div')
    })
    document.body.appendChild(confirmDom.$el); //new一个对象，然后插入body里面
    confirmDom.content = {
      ...content,
    }; //为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义
    confirmDom.confirm = () => {
      res();
      confirmDom.isShow = false;
    }
    confirmDom.cancel = () => {
      rej();
      confirmDom.isShow = false;
    }
  })
}
export default theConfirm;

4、使用

import TheConfirm from '@/extend/confirm/index.js';
TheConfirm({
      show: true,
      title: '调宿确认',
      message: '确认将所选房间内所有人员调换至新房间？'，
      confirmText: '继续'
    }).then(() => {
          // 点击确定
    }).catch(() => {
          // 点击取消
    });