一、前言

• 宽度自定义、颜色自定义，如场景需要可自行添加修改字体大小
• 解决uni.showModal确认框内容不够灵活的问题
• 解决uni-popup弹出层需要自定义标题及按钮的样式问题
• 解决控制标题及按钮操作区的整体显隐
• 内容高度灵活，适配各类场景，使用灵活多变
• uni-popup二次封装，兼容原生uni-popup所有属性，type属性除五个方向值外其他慎用

二、注意事项

• 子组件需要将打开方法通过defineExpose暴露出去。
• 父组件使用子组件需要绑定ref，通过ref获取子组件暴露的方法，以此打开弹窗。
• 如需修改或添加组件属性方法，注意props解构，注意事件抛出。
• 由于组件嵌套问题，需要解除样式隔离，具体使用方法为新增一个<script></script>标签，抛出如下内容：

export default {
  options: {
    styleIsolation: 'shared'
  }
};

三、代码注释详解

属性

• animation控制动画开关，默认开启，有效值true false。
• type控制弹出方向，默认居中弹出，有效值left right top bottom center,其他属性值慎用。
• popupBgc控制弹窗背景色，默认白色，有效值为颜色值。
• maskClickShowFlag控制点击遮罩是否关闭，默认不关闭，有效值true false。
• borderRadius控制圆角,默认20rpx,有效值 例如 ??rpx、??%、??px.
• popupTitleflag控制标题显隐，默认显示，有效值true false。
• ConfirmationBoxTitle控制标题文本内容，默认文字为提示，文本值string类型即可。
• ConfirmationBoxTitleColor控制标题颜色，默认黑色，有效值为颜色值。
• popupWidth控制弹窗主体宽度，默认80vw,有效值??rpx、??%、??vw、??px 。
• ConfirmationBoxContentColor控制内容颜色，默认#aaaaaa，有效值为颜色值。
• content插槽控制内容，自定义即可，万能使用。
• popupBtnsflag控制底部按钮区域显隐，默认显示，有效值true false。
• ConfirmationBoxCanceFlag控制取消按钮显隐，默认显示，有效值true false。
• ConfirmationBoxCancelColor控制取消按钮颜色，默认#cccccc，有效值为颜色值。
• ConfirmationBoxCancelText控制取消按钮文本,默认为取消，文本值string类型即可
• ConfirmationBoxConfirmColor控制确认按钮颜色，默认#589df6，有效值为颜色值。
• ConfirmationBoxConfirmText控制确认按钮文本,默认为确认，文本值string类型即可

方法

• 子组件向父传递取消、确认、点击遮罩事件
• 子组件向父暴露popupOpen打开弹窗事件
• maskClick：点击遮罩触发
• cancel：点击取消触发
• confirm：点击确认触发

<template>
  <!--uni-popup整体属性参考原生文档，type支持五个弹出方向属性（其他属性慎用）-->
  <uni-popup ref="popupRef"
             :animation="animation"
             :type="type"
             :background-color="popupBgc"
             :is-mask-click="maskClickShowFlag"
             :mask-background-color="maskColor"
             :border-radius="borderRadius"
             @maskClick="maskClick">
    <!--popupTitleflag控制标题显隐-->
    <!--ConfirmationBoxTitleColor控制标题颜色-->
    <!--ConfirmationBoxTitle控制标题文本内容-->
    <view v-if="popupTitleflag" class="confirm-popup-title"
          :style="{'color': ConfirmationBoxTitleColor}">
      <view>{{ ConfirmationBoxTitle }}</view>
    </view>
    <!--popupWidth控制弹窗宽度，内容宽度即为主体宽度-->
    <!--ConfirmationBoxContentColor控制颜色-->
    <!--content插槽控制内容-->
    <view class="confirm-popup-content"
          :style="{'color': ConfirmationBoxContentColor,'width': popupWidth+'!important'}">
      <slot name="content"></slot>
    </view>
    <!--popupBtnsflag控制底部按钮区域显隐-->
    <!--ConfirmationBoxCanceFlag控制取消按钮显隐-->
    <!--ConfirmationBoxCancelColor控制取消按钮颜色-->
    <!--ConfirmationBoxCancelText控制取消按钮文本-->
    <!--ConfirmationBoxConfirmColor控制确认按钮颜色-->
    <!--ConfirmationBoxConfirmText控制确认按钮文本-->
    <view class="btns" v-if="popupBtnsflag">
      <view v-if="ConfirmationBoxCanceFlag"
            class="btns-cancel" @click="cancel"
            :style="{'color': ConfirmationBoxCancelColor}">{{ ConfirmationBoxCancelText }}
      </view>
      <view class="btns-confirm" @click="confirm"
            :style="{'color': ConfirmationBoxConfirmColor}">{{ ConfirmationBoxConfirmText }}
      </view>
    </view>
  </uni-popup>
</template>
<script setup>
import { ref, defineProps, defineEmits, defineExpose } from 'vue';

// 弹窗ref
const popupRef = ref(false);
// 向父传递取消、确认、点击遮罩
const emit = defineEmits(['popupClose', 'popupConfirm', 'maskClick']);
// 解构props
const {
  popupWidth,
  type,
  maskClick,
  maskClickShowFlag,
  maskColor,
  animation,
  popupBgc,
  borderRadius,
  popupTitleflag,
  ConfirmationBoxTitle,
  ConfirmationBoxTitleColor,
  ConfirmationBoxContentColor,
  popupBtnsflag,
  ConfirmationBoxCancelText,
  ConfirmationBoxConfirmText,
  ConfirmationBoxCancelColor,
  ConfirmationBoxConfirmColor,
  ConfirmationBoxCanceFlag
} = defineProps({
  // 弹窗宽度
  popupWidth: {
    type: String,
    default: '80vw'
  },
  // 控制弹出方式
  type: {
    type: String,
    default: 'center'
  },
  // 点击遮罩是否关闭弹窗
  maskClickShowFlag: {
    type: Boolean,
    default: false
  },
  // 遮罩层颜色
  maskColor: {
    type: String,
    default: 'rgba(0,0,0,0.4)'
  },
  // 是否开启动画
  animation: {
    type: Boolean,
    default: false
  },
  // 弹窗背景色
  popupBgc: {
    type: String,
    default: '#ffffff'
  },
  // 圆角
  borderRadius: {
    type: String,
    default: '20rpx'
  },
  // 标题显隐
  popupTitleflag: {
    type: Boolean,
    default: true
  },
  // 标题文本
  ConfirmationBoxTitle: {
    type: String,
    default: '提示'
  },
  // 标题文本颜色
  ConfirmationBoxTitleColor: {
    type: String,
    default: 'black'
  },
  // 自定义内容文本颜色
  ConfirmationBoxContentColor: {
    type: String,
    default: '#aaaaaa'
  },
  // 按钮区域显隐
  popupBtnsflag: {
    type: Boolean,
    default: true
  },
  // 取消按钮文本
  ConfirmationBoxCancelText: {
    type: String,
    default: '取消'
  },
  // 确认按钮文本
  ConfirmationBoxConfirmText: {
    type: String,
    default: '确认'
  },
  // 取消按钮文本颜色
  ConfirmationBoxCancelColor: {
    type: String,
    default: '#cccccc'
  },
  // 确认按钮文本颜色
  ConfirmationBoxConfirmColor: {
    type: String,
    default: '#589df6'
  },
  // 取消按钮显隐
  ConfirmationBoxCanceFlag: {
    type: Boolean,
    default: true
  }
});

// 弹出
function popupOpen() {
  popupRef.value.open();
}

// 取消
function cancel() {
  popupRef.value.close();
  emit('onCancel');
}

// 确认
function confirm() {
  popupRef.value.close();
  emit('onConfirm');
}

// 点击遮罩
function maskClick() {
  emit('maskClick');
}

defineExpose({
  popupOpen
});
</script>
<!--解除样式隔离-->
<script>
export default {
  options: {
    styleIsolation: 'shared'
  }
};
</script>
<style lang="scss" scoped>
:deep(.uni-popup__wrapper) {
  font-size: 32rpx;
  text-align: center;
  .confirm-popup-title {height: 100rpx;line-height: 100rpx;font-weight: 900}
  .confirm-popup-content {min-height: 100rpx;padding: 0 40rpx 40rpx;line-height: 60rpx;}
  .btns {display: flex;align-items: center;border-top: 1px solid #cccccc;
    .btns-cancel, .btns-confirm {flex: 1;height: 100rpx;line-height: 100rpx;}
    .btns-cancel {border-right: 1px solid #cccccc;}
  }
}
</style>

四、组件使用

<template>
  <button @click="submit">提交</button>
  <ConfirmationBox ref="ConfirmationBoxRef" @onConfirm="confirm" @onCancel="cancel" @maskClick="maskClick">
    <template #content>
      <!--<image></image>-->
      <view>支持任意自定义内容</view>
    </template>
  </ConfirmationBox>
</template>
<script setup>
import ConfirmationBox from '@/components/ConfirmationBox/index.vue';

import { ref } from 'vue';

const ConfirmationBoxRef = ref(null);

// 提交
function submit() {
  ConfirmationBoxRef.value.popupOpen();
}

// 取消
function cancel() {
  console.log('取消');
}

// 确认
function confirm() {
  console.log('确认');
}

// 点击遮罩
function maskClick() {
  console.log('点击遮罩');
}
</script>

五、效果展示

展示仅为默认效果，具体使用场景，可自行开发