middleground_H5/components/basePopup/index.vue

<!-- 
	desc: 弹窗组件
	date: 20230719
	参数说明：
		isShowPopup：是否打开弹窗，布尔类型
		isOverlay: 是否显示遮罩
		mode: 弹出方向 String类型 默认：bottom 可选值 top / right / bottom / center
		duration: 遮罩打开或收起的动画过渡时间，单位ms
		closeable: 是否显示关闭图标
		overlayOpacity:遮罩透明度，0-1之间，勿与overlayStyle共用
		closeOnClickOverlay: 点击遮罩是否关闭
		safeAreaInsetTop:是否留出顶部安全距离（状态栏高度）默认false
		closeIconPos：自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
		round: 设置圆角值，仅对mode = top | bottom | center有效
		bgColor:背景色，一般用于特殊弹窗内容场景，设置为transparent可去除默认的白色背景
		zoom:当mode=center时 是否开启缩放
 -->
<template>
  <view>
    <u-popup
      :show="isShowPopup"
      :overlay="isOverlay"
      :mode="mode"
      :duration="duration"
      :closeable="closeable"
      :overlayOpacity="overlayOpacity"
      :closeOnClickOverlay="closeOnClickOverlay"
      :overlayStyle="{ 'touch-action': 'none' }"
      :safeAreaInsetTop="safeAreaInsetTop"
      :closeIconPos="closeIconPos"
      :round="round"
      bgColor="bgColor"
      :zoom="zoom"
      @close="handleCloseClick"
      @open="handlerPopupOpen"
    >
      <view class="buttom" v-if="buttomBtn">
        <text @click="handleCloseClick" v-if="showCancle">取消</text>
        <text class="title" v-if="showtitle">{{ title }}</text>
        <text @click="handleConfirmClick" v-if="showSubmitBtn">确定</text>
        <slot name="btn" style="width:100%;"></slot>
      </view>
      <view class="scrool" :style="{ height: popuoHeight }">
        <slot></slot>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    isOverlay: {
      type: Boolean,
      default: true,
    },
    mode: {
      type: String,
      default: "bottom",
    },
    popuoHeight: {
      type: String,
      default: "800rpx",
    },
    duration: {
      type: [Number, String],
      default: 300,
    },
    closeable: {
      type: Boolean,
      default: false,
    },
    overlayOpacity: {
      type: [Number, String],
      default: 0.5,
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true,
    },
    showSubmitBtn: {
      type: Boolean,
      default: true,
    },
    showCancle: {
      type: Boolean,
      default: true,
    },
    showtitle: {
      type: Boolean,
      default: true,
    },
    buttomBtn: {
      type: Boolean,
      default: true,
    },
    safeAreaInsetTop: {
      type: Boolean,
      default: false,
    },
    closeIconPos: {
      type: String,
      default: "top-right",
    },
    title: {
      type: String,
      default: "",
    },
    round: {
      type: [Number, String],
      default: 0,
    },
    bgColor: {
      type: String,
      default: "",
    },
    zoom: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isShowPopup: false,
    };
  },
  methods: {
    // 弹窗关闭时触发的方法
    handlerPopupClose() {
      this.isShowPopup = false;
    },
    // 弹窗打卡触发的方法
    handlerPopupOpen() {
      // this.isShowPopup = true
    },
    handleConfirmClick() {
      this.$emit("handleConfirmClick");
    },
    handleCloseClick() {
      this.isShowPopup = false;
      this.$emit("handleCloseClick");
    },
  },
};
</script>

<style scoped lang="scss">
.buttom {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f2f3f4;
    width: 100%;
  view{
    width: 100%;
  }

  text {
    padding: 20rpx 40rpx;
    font-size: 28rpx;
  }

  text:last-child {
    color: #3c9cff;
  }
}

.scrool {
  overflow-y: scroll; // 超出滚动
  overscroll-behavior: none; // 禁止滚动溢出
}
.title {
  font-weight: bold;
}
</style>