使用方法

1. 引入

import KekeConfirm from "@/components/KekeConfirm"

2. 应用

kekeConfirm({
  show: true,
  title: '提示',
  message: '确认删除这个评论吗？',
}).then(async () => {
  // 此处填写二次确认后执行的逻辑
})

3. 源码(KekeConfirmModal.vue, index.js)

<template>
  <u-modal
    :show="content.show" width="600rpx"   
    v-if="isShow"
    :showConfirmButton="true"
    :showCancelButton="true"
    confirmColor="rgba(15, 168, 172, 1)"
    @confirm="confirm" @cancel="cancel"
  >
    <view class="slot-title">{{ content.title }}</view>
    <view class="slot-content">
      {{ content.message }}
    </view>
  </u-modal>
</template>

<script>
export default {
  name: "KekeConfirmModal",
  data() {
    return {
      isShow: true,
      content: {
        title: '提示',
        message: '',
        show: false
      }
    };
  },
  methods: {
    confirm() {
      // console.log('确定');
    },
    cancel() {
      // console.log('取消');
    }
  },
};
</script>

<style lang="scss" scoped>
/deep/.u-modal__content {
  display: block;
}
.slot-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #606266;
  text-align: center;
}
.slot-content {
  text-align: center;
  padding-top: 20rpx;
  white-space: pre-line;
  font-size: 28rpx;
  font-family: Font-Regular, Heiti SC;
  font-weight: 400;
  color: #767676;
}
</style>

import Vue from 'vue'
import KekeConfirmModal from './KekeConfirmModal.vue'

const KekeConfirm = Vue.extend(KekeConfirmModal)

const kekeConfirm = (content) => {
   return new Promise((resolve, reject) => {
      let confirmDom = new KekeConfirm({
         el: document.createElement('div')
      })
      document.body.appendChild(confirmDom.$el)
      // confirmDom.title = content
      confirmDom.content = {
         ...content
      }
      confirmDom.confirm = () => {
         resolve()
         confirmDom.isShow = false
      }
      confirmDom.cancel = () => {
         // reject()
         confirmDom.isShow = false
      }
   })
}

export default kekeConfirm