106 lines
1.8 KiB
Vue
106 lines
1.8 KiB
Vue
<template>
|
||
<view>
|
||
<view class="addall guodu" :class="{ unclass: !show }" :style="{ zIndex: showbox ? 220 : -2 }">
|
||
<view class="title">
|
||
请领详情
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mengban" v-if="show" @click="() => emit('back')"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
watch,
|
||
onMounted
|
||
} from 'vue'
|
||
|
||
const props = defineProps({
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
font: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
plsbuy: {
|
||
type: Object,
|
||
// default: () => ({})
|
||
}
|
||
})
|
||
|
||
// 暴露给模板的 emit
|
||
const emit = defineEmits(['back'])
|
||
|
||
const showbox = ref(false)
|
||
|
||
// 监听 show，保留你原来的逻辑：show 为 true 时延迟 50ms 再把 showbox 设为 true，false 时立即关掉
|
||
watch(
|
||
() => props.show,
|
||
(n) => {
|
||
if (n) {
|
||
setTimeout(() => {
|
||
showbox.value = true;
|
||
console.log('plsbuy =>', props.plsbuy)
|
||
}, 50)
|
||
|
||
} else {
|
||
showbox.value = false
|
||
}
|
||
}
|
||
)
|
||
|
||
// mounted 中打印 plsbuy（你要的行为）
|
||
onMounted(() => {
|
||
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.addall {
|
||
width: 55vw;
|
||
height: 50vw;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
|
||
border-radius: 1.6vw;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
padding: 1.5vw 2.2vw;
|
||
z-index: 9120;
|
||
}
|
||
|
||
.unclass {
|
||
opacity: 0 !important;
|
||
}
|
||
|
||
.guodu {
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.mengban {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 100;
|
||
background: RGBA(239, 240, 244, 0.55);
|
||
}
|
||
.title{
|
||
height: 6vh;
|
||
width: 100%;
|
||
// background-color: red;
|
||
font-size: 38rpx;
|
||
font-weight: 600;
|
||
border-bottom: 2rpx solid #E5E5E5;
|
||
}
|
||
</style> |