uniapp 全局封装二级删除确认弹出窗

效果图：

 思路：1、创建  initModal.js文件 放在store 文件夹下  初始化这个二级弹出窗

            2、创建  show-modal.vue 文件  组件的主体       

            3、main.js 文件全局引入

            4、想用的地方使用

initModal.js 文件

import Vuex from 'vuex'
export default function initModal(v) {
  // 挂在store到全局Vue原型上
  v.prototype.$modalStore = new Vuex.Store({
    state: {
      show: false,
      title: '标题',
      content: '内容',
      showCancel: true,
      cancelText: '取消',
      cancelColor: 'rgba(0, 0, 0, 0.65)',
      cancelBackgroundColor: '#FFFFFF',
      confirmText: '确定',
      confirmColor: '#FFFFFF',
      confirmBackgroundColor: '#1890FF',
      success: null,
    },
    mutations: {
       // 关闭
      hideModal(state) {
        state.show = false
      },
       // 打开
      showModal(state, data) {
        state = Object.assign(state, data)
        state.show = true
      },
        // 成功/失败回调函数
      success(state, res) {
        let cb = state.success
        let resObj = {
          cancel: false,
          confirm: false,
        }
        res == 'confirm' ? (resObj.confirm = true) : (resObj.cancel = true)
        cb && cb(resObj)
      },
    },
  })
  v.prototype.$showModal = function (option) {
    if (typeof option === 'object') {
      v.prototype.$modalStore.commit('showModal', option)
    } else {
      throw '配置项必须为对象传入的值为：' + typeof option
    }
  }
}

 show-modal.vue 文件（自己写的样式  可以根据自己需要修改）

<template>
  <view class="_showModal" v-show="show">
    <!--  黑色背景遮罩 -->
    <view class="_shade"></view>
    <!-- 模态框主体 -->
    <view class="_modalBox">
      <view class="_modal">
        <slot name="title">
          <view class="title" v-show="title"
            ><img src="@/static/img/assess/warning.png" />{{ title }}</view
          >
        </slot>
        <slot name="content">
          <view class="content">{{ content }}</view>
        </slot>
        <slot name="btn">
          <view class="btnbox">
            <view
              class="btn"
              :style="{
                color: confirmColor,
                background: confirmBackgroundColor,
              }"
              @click.stop="clickBtn('confirm')"
              >{{ confirmText }}</view
            >
            <view
              class="btn"
              :style="{ color: cancelColor, background: cancelBackgroundColor }"
              style="border: 1px solid #d9d9d9"
              @click.stop="clickBtn('cancel')"
              >{{ cancelText }}</view
            >
          </view>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "show-modal",
  computed: {
    show() {
      return this.$modalStore.state.show;
    },
    title() {
      return this.$modalStore.state.title;
    },
    content() {
      return this.$modalStore.state.content;
    },
    showCancel() {
      return this.$modalStore.state.showCancel;
    },
    cancelText() {
      return this.$modalStore.state.cancelText;
    },
    cancelColor() {
      return this.$modalStore.state.cancelColor;
    },
    cancelBackgroundColor() {
      return this.$modalStore.state.cancelBackgroundColor;
    },
    confirmText() {
      return this.$modalStore.state.confirmText;
    },
    confirmColor() {
      return this.$modalStore.state.confirmColor;
    },
    confirmBackgroundColor() {
      return this.$modalStore.state.confirmBackgroundColor;
    },
  },
  methods: {
    closeModal() {
      this.$modalStore.commit("hideModal");
    },
    clickBtn(res) {
      this.$modalStore.commit("hideModal");
      this.$modalStore.commit("success", res);
    },
  },
  beforeDestroy() {
    this.$modalStore.commit("hideModal");
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
._showModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  ._shade {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.6;
    z-index: 11000;
  }
  ._modalBox {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12000;
    display: flex;
    justify-content: center;
    align-items: center;
    ._modal {
      flex: none;
      width: 267px;
      min-height: 175px;
      background: #ffffff;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      padding: 20px 20px 5px 20px;
      .title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 24px;
        text-align: center;
        font-weight: bold;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: left;
        img {
          width: 22px;
          height: 22px;
          margin-right: 10px;
        }
      }
      .content {
        // min-height: 80px;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // text-align: center;
        margin: 18px auto;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
      }
      .btnbox {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .btn {
          width: 64px;
          height: 36px;
          //   border-radius: 16px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 22px;
        }
      }
    }
  }
}
</style>

main.js 文件

// 全局自定义模态弹窗
import initModal from "@/common/store/modules/initModal.js"
import showModal from "@/components/commons/show-modal.vue"
initModal(Vue);
//注册组件
Vue.component('show-modal',showModal);

最后 在使用的地方引入

在使用的页面引入

 在点击方法中调用:

     submit() {
        //TODO  提前保存一下 this  要不下面直接使用会报错 this is undefined
      var that = this;
      that.$showModal({
        title: "提示信息",//标题
        content: "想写的内容",
        cancelText: "取消", //按钮
        confirmText: "确定",//按钮
        async success(res) {
          if (res.confirm) {
            try {
                // 调用接口  TODO  this要用 that  根据自己封装的接口调用
                var resData = await that.$api.XXXXX({
                  XX: that.XX,
                  XX: that.XX,
                });
              if (resData.data.code == 200 && resData.data.success) {
                  // 提示信息
                uni.showToast({
                  title: "提交成功",
                  icon: "success",
                  duration: 1000,
                });
                 // 修改上个页面的值
                var pages = getCurrentPages();
                var prevPage = pages[pages.length - 2];
                prevPage.seachId = that.seachId;
                prevPage.officeId = that.officeId;
                //返回上一个页面 
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                  });
                }, 1000);
              }
            } catch (e) {
              console.log(e);
            }
          }
        },
      });
    },

到此结束了  如果觉得有帮助 点个赞 ^_^

注：参照之前的一个博主的文章 自己使用的时候改写的 原作者链接找不到了  侵权请联系我删除