vue3自定义顶部弹窗

1.组件的封装

<template>
    <view v-if="show" class="bidding-type-container">
        <!-- 遮罩层 -->
        <view class="bidding-type-mask" @click="handleClose"></view>
        <!-- 弹窗内容 -->
        <view class="bidding-type-popup">
            <view class="popup-content">
                <text>人生若只如初见，何事秋风悲画扇</text>
            </view>
        </view>
    </view>
</template>

<script setup>
defineOptions({
    name: 'BiddingType'
})

defineProps({
    show: {
        type: Boolean,
        default: false
    },
    headerHeight: {
        type: Number,
        default: 0
    }
})

const emit = defineEmits(['close'])

const handleClose = () => {
    emit('close')
}
</script>

<style scoped lang="scss">
.bidding-type-container {
    position: fixed;
    top: v-bind('headerHeight + "px"');
    left: 0;
    right: 0;
    bottom: 0;
}

.bidding-type-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.bidding-type-popup {
    position: relative;
    background-color: #ffffff;
    border-top: 2rpx solid #e9ebf1;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.popup-content {
    padding: 40rpx;
}
</style>

2.父组件使用

• 引入

import BiddingType from './components/biddingType.vue'

//变量定义
const showBiddingType = ref(false) 

onLoad((options) => {
  // 获取头部高度,使组件更贴合
  const query = uni.createSelectorQuery()
  console.log('query:', query)
  query.select('.rank-header').boundingClientRect(data => {
    if (data) {
      headerHeight.value = data.height
    }
  }).exec()
})

• 使用

<bidding-type :show="showBiddingType" @close="showBiddingType = false"></bidding-type>