VAVABUY/components/popup.vue

<template>
  <up-popup
    :show="show"
    :overlay="!overlay"
    :closeOnClickOverlay="!closeOnClickOverlay"
    :zIndex="zIndex"
    :safeAreaInsetTop="safeAreaInsetTop"
    :round="round"
    :mode="mode"
    @close="close"
    :customStyle="{ maxWidth: '1536rpx', margin: '0 auto' }"
  >
    <view class="pop">
      <view class="top" v-if="title || isClose">
        <view class="top_left">
          <slot name="title">
            <trans :_t="title" />
          </slot>
        </view>
        <view class="close" @click="close" v-if="isClose">
          <i
            class="icon-font"
            :class="icon"
            :style="{ color: iconColor, fontSize: iconSize }"
          ></i>
        </view>
      </view>
      <view class="conts">
        <slot name="content"></slot>
      </view>
      <view class="footer">
        <slot name="footer"></slot>
      </view>
    </view>
  </up-popup>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
  overlay: Boolean,
  closeOnClickOverlay: Boolean,
  safeAreaInsetTop: Boolean,
  title: {
    type: String,
    default: "",
  },
  round: {
    type: Number,
    default: 10,
  },
  mode: {
    type: String,
    default: "bottom",
  },
  isClose: Boolean,
  icon: {
    type: String,
    default: "icon-close",
  },
  iconColor: {
    type: String,
    default: "var(--text-01)",
  },
  iconSize: {
    type: String,
    default: "28px",
  },
  zIndex: {
    type: [Number, String],
    default: 10075,
  },
});

const emit = defineEmits(["close"]);

const show = ref(false);
const open = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
};
defineExpose({
  open,
  close,
});
</script>
<style lang="less" scoped>
.pop {
  max-height: 80vh;
  display: flex;
  flex-direction: column;

  .top {
    padding: 48rpx 48rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &_left {
      display: flex;
      align-items: center;
      color: var(--text);
      font-size: 32rpx;
      font-weight: 700;
    }

    .close {
      .icon-close {
        cursor: pointer;
        font-weight: 400;
      }
    }
  }

  .conts {
    display: flex;
    align-items: stretch;
    flex-grow: 1;
    padding: 32rpx 48rpx;
    overflow: hidden scroll;
  }

  .footer {
    padding: 0 48rpx 24rpx;
  }
}
</style>