108 lines
2.0 KiB
Vue
108 lines
2.0 KiB
Vue
<script setup>
|
|
import { ref, watch } from "vue";
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: "650rpx",
|
|
},
|
|
onClose: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
noBg: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const showContainer = ref(false);
|
|
const showContent = ref(false);
|
|
watch(
|
|
() => props.show,
|
|
(newValue) => {
|
|
if (newValue) {
|
|
showContainer.value = true;
|
|
setTimeout(() => {
|
|
showContent.value = true;
|
|
}, 100);
|
|
} else {
|
|
showContent.value = false;
|
|
setTimeout(() => {
|
|
showContainer.value = false;
|
|
}, 100);
|
|
}
|
|
},
|
|
{}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<view
|
|
class="container"
|
|
v-if="showContainer"
|
|
:style="{ opacity: show ? 1 : 0 }"
|
|
@click="onClose"
|
|
>
|
|
<view
|
|
class="modal-content"
|
|
:style="{
|
|
transform: `translateY(${showContent ? '0%' : '100%'})`,
|
|
height,
|
|
}"
|
|
@click.stop=""
|
|
>
|
|
<image
|
|
v-if="!noBg"
|
|
src="https://static.shelingxingqiu.com/attachment/2025-12-04/dep11770wzxg6o2alo.png"
|
|
mode="widthFix"
|
|
/>
|
|
<view class="close-btn" @click="onClose" v-if="!noBg">
|
|
<image src="../static/close-yellow.png" mode="widthFix" />
|
|
</view>
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #00000099;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
z-index: 99;
|
|
}
|
|
.modal-content {
|
|
width: 100%;
|
|
transform: translateY(100%);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
.modal-content > image:first-child {
|
|
width: 100%;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
.close-btn {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
.close-btn > image {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
</style>
|