vue3封装一个和vant showConfirmDialog一模一样的二次确认弹框

前言

因为原来项目有很多二次确认弹框， 比如一些删除按钮，保存更新按钮在点击后需要二次确认后在去调用接口，由于项目不同的模块是多个前端开发的，因为项目赶进度以及产品没有定义一个统一的标准规范，所以项目中很多二次确认弹框的UI样式都不一样，为了提高产品的体验性需要对这些弹框进行样式的统一规范化处理。

原弹框样式

使用vant二次确认弹框调用方法通过调用showConfirmDialog 方法传入 title 何以message来实现

import { showConfirmDialog } from 'vant'; 
 showConfirmDialog({
   title: '提示', 
   message: '确定要删除该内容吗?', 
  }) .then(() => { 
  
  }) .catch(() => { 
  
  })

UI 设计的弹框样式

个人思路

因为涉及需要修改的页面太多了，如何高效率且优雅的实现将所有弹框样式改成UI设计的弹框样式是需要考虑的

我的想法是封装一个和 vant showConfirmDialog API方法调用一模一样的组件来实现

实现的代码

1.首先新建一个 showConfirmDialog 文件夹

2.在文件夹下面创建3个文件：index.js , index.md , showConfirmDialog.vue

showConfirmDialog.vue ： 弹框的UI和交互逻辑

//showConfirmDialog.vue
<template>
  <div class="z-confirm-box" :class="{ fade: show }">
    <div class="confirm-wrapper" :class="{ fade: show }">
      <div class="confirm-title">
        <p>{{ title }}</p>
      </div>
      <div class="confirm-body">
        <div class="body-rich" v-show="content" v-html="content"></div>
      </div>
      <div class="confirm-footer">
        <div class="confirm-cancel" :style="cancelButtonStyle" @click="cancelCallback">{{ cancelButtonText }}</div>
        <div class="confirm-ok" :style="confirmButtonStyle" @click="confirmCallback">{{ confirmButtonText }}</div>
      </div>
    </div>
  </div>
</template>

<script setup name="showConfirmDialog">
import { defineProps, ref, computed } from "vue";

const props = defineProps({
  content: {
    type: String,
    default: null
  },
  title: {
    type: String,
    default: "标题"
  },
  // 点击 确认/提交 后执行
  confirmCallback: {
    type: Function
  },
  //  点击 取消 后执行
  cancelCallback: {
    type: Function
  },
  confirmButtonText: {
    type: String,
    default: "确认"
  },
  cancelButtonText: {
    type: String,
    default: "取消"
  },
  // 确认按钮文字颜色
  confirmButtonColor: {
    type: String,
    default: "#ffffff"
  },
  // 取消按钮文字颜色
  cancelButtonColor: {
    type: String,
    default: "#2787fc"
  },
  // 确认按钮背景颜色
  confirmButtonBgColor: {
    type: String,
    default: "#267EF0"
  },
  //取消按钮背景颜色
  cancelButtonBgColor: {
    type: String,
    default: "#ffffff"
  },
  //确认按钮边框颜色
  confirmButtonBorderColor: {
    type: String,
    default: "#267EF0"
  },
  // 取消按钮边框颜色
  cancelButtonBorderColor: {
    type: String,
    default: "#267EF0"
  }
});

// 确认按钮样式
const confirmButtonStyle = computed(() => {
  const { confirmButtonColor, confirmButtonBgColor, confirmButtonBorderColor } = props;
  return {
    color: confirmButtonColor,
    backgroundColor: confirmButtonBgColor,
    borderColor: confirmButtonBorderColor
  };
});
// 取消按钮样式
const cancelButtonStyle = computed(() => {
  const { cancelButtonColor, cancelButtonBgColor, cancelButtonBorderColor } = props;
  return {
    color: cancelButtonColor,
    backgroundColor: cancelButtonBgColor,
    borderColor: cancelButtonBorderColor
  };
});

const show = ref(true);
</script>

<style lang="scss" scoped>
.z-confirm-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8888;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 0%);
  &.fade {
    // 过渡效果
    background: rgb(0 0 0 / 70%);
    transition: all 0.4s;
  }
  .confirm-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 450px;
    padding: 56px 48px;
    background: #ffffff;
    border-radius: 16px;
    opacity: 0;
    &.fade {
      opacity: 1;
      transition: all 0.4s;
    }
    > .confirm-title {
      display: flex;
      align-items: center;
      justify-content: center;
      > p {
        font-size: 36px;
        font-weight: bold;
        color: #333333;
      }
    }
    .confirm-body {
      box-sizing: border-box;
      min-height: 120px;
      padding-top: 26px;
      padding-bottom: 26px;
      font-size: 28px;
      color: #999999;
      text-align: center;
    }
    .confirm-footer {
      display: flex;
      justify-content: center;
      > div {
        box-sizing: border-box;
        min-width: 200px;
        height: 72px;
        padding: 0 2px;
        overflow: hidden;
        font-size: 30px;
        line-height: 72px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        border-style: solid;
        border-width: 2px;
        border-radius: 8px;
      }
      .confirm-cancel {
        margin-right: 14px;
        background-color: #ffffff;
      }
      .confirm-ok {
        margin-left: 14px;
        background-color: #2787fc;
      }
    }
  }
}
</style>

index.js ：通过API方法来使用 showConfirmDialog

import { h, render } from 'vue'
import ConfirmDialog from './showConfirmDialog.vue'


export default function showConfirmDialog(props) {
  const div = document.createElement('div')
  div.setAttribute('class', 'z-confirm-message')
  document.body.appendChild(div)
  
  return new Promise((resolve, reject) => {
    const confirmCallback = () => {
      document.body.removeChild(div)    
      resolve(undefined)
    }

    const cancelCallback = () => {
      document.body.removeChild(div)    
      reject(undefined)
    }
    const vNode = h(ConfirmDialog, {
      ...props,
      confirmCallback,
      cancelCallback
    })
    render(vNode, div)
  })
}

index.md： 组件方法如何使用的示例和API文档

<!-- 使用方式 -->

```html
<template>
  <div>
    <button @click="deletePatient">删除</button>
  </div>
</template>
<script setup>
  import showConfirmDialog from "@/components/showConfirmDialog/";

  const deletePatient = () => {
    showConfirmDialog({
      title: "提示？",
      content: "<div style="color:#0099cc">确定要删除该内容</div>",
      confirmButtonColor: "#ffffff",
      cancelButtonColor: "#267EF0",
      confirmButtonBgColor: "#267EF0",
      cancelButtonBgColor: "#ffffff",
      confirmButtonText: "删除",
      cancelButtonText: "取消"
    }).then(() => {
      console.log("成功");
    });
  };
</script>

组件的API文档

参数	说明	类型	默认值	可传入值
title	标题	String	标题	String
content	内容支持富文本	String		String
.then	点击确认回调	Function		-
.catch	点击取消回调	Function		-
confirmButtonText	确认按钮文字	String	确认	-
confirmButtonText	取消按钮文字	String	取消	-
confirmButtonColor	确认按钮文字颜色	String	#ffffff	String
cancelButtonColor	取消按钮文字颜色	String	#2787fc	String
confirmButtonBgColor	确认按钮背景颜色	String	#2787fc	String
cancelButtonBgColor	取消按钮背景颜色	String	#ffffff	String
cancelButtonColor	取消按钮文字颜色	String	#2787fc	String
confirmButtonBorderColor	确认按钮边框颜色	String	#267EF0	String
cancelButtonBorderColor	取消按钮边框颜色	String	#267EF0	String

结语

在封装完之后将项目原涉及使用vant showConfirmDialog 的地方:

import { showConfirmDialog } from 'vant';

改为：

import showConfirmDialog from "@/components/showConfirmDialog/