101 lines
2.4 KiB
Vue
101 lines
2.4 KiB
Vue
<template>
|
||
<view class="view-popup">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view v-if="nav" style="width: 100%;background-color: #fff;" :style="{height: height + 'px'}"></view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view v-if="nav" style="width: 100%;height: calc( var(--status-bar-height) + 44px );background-color: #fff;"></view>
|
||
<!-- #endif -->
|
||
<view class="center">
|
||
<slot></slot>
|
||
<view class="up" @click="close">
|
||
<text>点击收起</text>
|
||
<up-icon name="arrow-up"></up-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from "vue"
|
||
|
||
const props = defineProps({
|
||
nav: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['close', 'click'])
|
||
const close = () => {
|
||
emit('close')
|
||
}
|
||
|
||
// #ifdef MP-WEIXIN
|
||
const height = ref(0);
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
// 获取手机顶部状态栏的高度
|
||
const statusBarHeight = res.statusBarHeight || 0;
|
||
|
||
// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
|
||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||
const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
|
||
|
||
// 计算顶部图标距离
|
||
const topIconDistance = statusBarHeight + navBarHeight;
|
||
|
||
// 打印顶部图标距离
|
||
console.log('顶部图标距离:', topIconDistance);
|
||
height.value = topIconDistance;
|
||
},
|
||
fail: (err) => {
|
||
console.error('获取系统信息失败:', err);
|
||
},
|
||
});
|
||
// #endif
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.view-popup {
|
||
height: 100vh;
|
||
width: 100%;
|
||
background-color: rgba(#000, 0.3);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 10;
|
||
|
||
.center {
|
||
animation: slideDown 0.3s forwards;
|
||
}
|
||
|
||
.up {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background-color: #fff;
|
||
border-radius: 0 0 28rpx 28rpx;
|
||
border-top: 1rpx solid #f6f6f6;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
@keyframes slideDown {
|
||
from {
|
||
transform: translateY(-100%);
|
||
/* 初始状态：向上偏移100% */
|
||
}
|
||
|
||
to {
|
||
transform: translateY(0);
|
||
/* 最终状态：无偏移 */
|
||
}
|
||
}
|
||
</style> |