shanxia2.0/miniprogram/components/db-ui/db-popup.vue

<template>
  <view v-if="show" class="db-popup-mask" @click="onMask">
    <view class="db-popup-panel" :style="panelStyle" @click.stop>
      <slot />
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  show: Boolean,
  height: { type: String, default: '70vh' }
})
const emit = defineEmits(['close', 'update:show'])

const panelStyle = computed(() => ({
  maxHeight: props.height,
  height: props.height
}))

function onMask() {
  emit('update:show', false)
  emit('close')
}
</script>

<style scoped>
.db-popup-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}
.db-popup-panel {
  width: 100%;
  background: #fff;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
</style>