一、前言

大家好，我是地霊殿__三無。平时大家是不是经常看到一些酷炫的弹窗，尤其是在大屏项目上，各种酷炫效果，追求一个极致的色彩美。而这其中原理很简单，css部分大家都会吧，无非就是一个全局引入来方便使用而已，今天我带大家来实现自定义的confirm弹窗。

二、实现过程

1、先来个效果图

这是平时的comfirm弹窗，简约风，常常跟UI设计图的风格显得格格不入。

这是修改后的comfirm弹窗，适配蓝色风格的大屏基调。

元素和样式的自定义，让我们对于ui给出的各种设计图有了足够的底气，你想怎么改就怎么改，而不是死磕el-elment的comfirm组件，改css又麻烦，还不能随意添加元素，费时费力，最后可能还和设计图差得有点多，从而无奈返工。

2、实现思路一：创建组件

2.1 新建ai-comfirm文件夹及以下文件

路径为： src/msdp-common-ai-center/components/ai-comfirm

后续全局或者局部引入时，需要用到这个路径

2.1.1 ai-comfirm.vue

作用：自定义的元素，样式可以自由发挥

下面的源码是部分基本元素的生成，以及外框部分的部分样式，里面的样式我就没放出来了，有些是要图片之类的资源，直接copy也用不起来。

xml 复制代码

源码：

<template>
  <div v-if="isShow" class="confirmationBox">
    <div class="mask-div"></div>
    <div class="out-line-box animate__animated animate__zoomIn">
      <div class="confirmation-content-box">

    <!-- 标题和描述 -->
    <div class="confirmation-title">
      <span class="confirmation-title-text" :title="text.msg">{{ text.msg }}</span>
      <span class="confirmation-title-icon"></span>
    </div>
    <div class="confirmation-msg">
      <span class="confirmation-msg-icon"></span>
      <span class="confirmation-msg-text" :title="text.title">{{ text.title }}</span>
    </div>

    <!-- 底部两个按钮 -->
    <div class="btn-back-and-ok">
      <el-button
        class="ai-el-button-qianred button-box"
        @click.prevent="cancel"
      >
        {{ text.btn.cancelVal }}
      </el-button>
      <!-- 确认按钮 -->
          <el-button
            class="ai-el-button-qianblue button-box"
            @click.prevent="confirm"
          >
            {{ text.btn.confirmVal }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'ConfirmationBox',
      data() {
        return {
          isShow: true,
          text: {
            title: '提示',
            msg: '描述信息！',
            cancelBtn: true,
            confirmBtn: true,
            btn: {
              confirmVal: '确定',
              cancelVal: '取消'
            }
          }
        }
      },
      mounted() {
      },
      methods: {
        // 取消
        cancel() {
          this.isShow = false
        },
        // 确认
        confirm() {
          this.isShow = false
        }
      }
    }
    </script>
<style scoped lang="scss">
 // 外框的样式
.confirmationBox{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.mask-div{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #161a1cde;
  z-index: 99999;
}

/*外边框*/
.out-line-box{
  /* box-shadow:  0 0 10px 2px #63c6ffa1; */
  height: auto;
  min-height: 200px;
  width: 600px;
  margin: auto;
  border-top-left-radius: 7px;
  border-bottom-right-radius: 7px;
  z-index: 99999;
  position: relative;
  top: calc((100% - 300px) / 2);
}
/*内容*/
.confirmation-content-box{
  height: auto;
  min-height: 200px;
  width: 100%;
  background: linear-gradient(180deg, rgba(43,140,255,0) 0%, rgba(71,118,205,0.38) 100%);
  border-radius: 6px;
  border: 4px solid;
  border-image: linear-gradient(180deg, rgba(245, 253, 255, 0), rgba(105, 206, 246, 0.8), rgba(70, 129, 243, 1)) 4 4;
}

剩下内部的样式，可以自定义，
</style>

2.1.2 ai-comfirmExtend.js

作用： 负责自定义comfirm组件实例的创建、方法属性回调和抛出实例

=======

javascript 复制代码

源码：

import Vue from 'vue'
import confirm from './ai-confirm.vue'
const ConfirmConstructor = Vue.extend(confirm)
const theConfirm = function(title, msg, options) {
  return new Promise((res, rej) => { // promise封装，ok执行resolve，no执行rejectlet
    const confirmDom = new ConfirmConstructor({
      el: document.createElement('div')
    })
    document.body.appendChild(confirmDom.$el) // new一个对象，然后插入body里面
    const text = {
      title: title,
      msg: msg,
      btn: {
        confirmVal: options.confirmButtonText,
        cancelVal: options.cancelButtonText,
        ...options
      }
    }
    confirmDom.text = Object.assign({}, confirmDom.text, text) // 为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义
    confirmDom.confirm = function() {
      confirmDom.isShow = false
      res('确认')
    }
    confirmDom.cancel = function() {
      confirmDom.isShow = false
      // rej('取消')
    }
  })
}

export default theConfirm

2.2 实现思路二：全局引入

上面我们已经完成了自定义的comfirm弹窗了，为了更方便的使用，本文是采用了全局引入的方式进行实现。（也可以根据需要局部引入，jym自行实现即可）

在main.js文件中

javascript 复制代码

import confirmMy from '@/msdp-common-ai-center/components/ai-comfirm/ai-comfirmExtend.js' // 
Vue.prototype.$confirmMy = confirmMy

2.3 实现思路三：组件内使用

全局引入后，我们在组件内通过this.$comfirmMy就可以正常访问到，而且用法上跟我们平时熟知的comfirm用法一致，不会降低代码的可读性。

dart 复制代码

示例：

this.$confirmMy('是否删除所选信息？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      //确认定情况下，执行的代码
    })
    .catch(() => { })

三、小结

本文从创建组件、引入组件、使用组件三方面，讲述了自定义comfirm弹窗的实现过程，jym可以也动手试试看。

ps: 我是地霊殿__三無，希望能帮到你。

vue项目自定义comfirm弹窗 金石