NN2023021801/addons/dbapp/components/custom-modal/custom-modal.vue

<script>
export default {
  name: 'custom-modal',
  props: {
    content: String,
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    // 主题色
    color: String,
    showBtn: {
      type: Boolean,
      default: true
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    },
    modalWidth: {
      type: String,
      default: '500rpx'
    },
    zIndex: {
      type: [String, Number],
      default: 10075
    },
    overlayZIndex: {
      type: [Number, String],
      default: 10070
    },
    // 向上偏移
    offsetY: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show: false
    }
  },
  methods: {}
}
</script>

<template>
  <u-popup
    :safeAreaInsetBottom="false"
    :show="show"
    round="10px"
    mode="center"
    @close="show = false"
    :customStyle="`padding:40rpx; width:${modalWidth};transform:translateY(-${offsetY}rpx)`"
    :zIndex="zIndex"
    :overlayZIndex="overlayZIndex"
    :closeOnClickOverlay="closeOnClickOverlay"
  >
    <slot>
      <u-text :text="content" size="30rpx" align="center" margin="60rpx 0"></u-text>
    </slot>
    <view class="flex flex-around" v-if="showBtn">
      <u-button
        v-if="showCancel"
        :text="cancelText"
        shape="circle"
        plain
        customStyle="width:210rpx;height:75rpx"
        @click="show = false"
      ></u-button>
      <u-button
        :style="{ flex: showCancel ? '' : '1' }"
        :color="color || 'var(--theme)'"
        :text="confirmText"
        shape="circle"
        customStyle="width:210rpx;height:75rpx"
        @click="$emit('confirm')"
      ></u-button>
    </view>
  </u-popup>
</template>

<style></style>