57 lines
1.3 KiB
Vue
57 lines
1.3 KiB
Vue
|
<script setup>
|
||
|
|
/*
|
||
|
|
* 封装一个带标题栏的弹窗
|
||
|
|
* */
|
||
|
|
const props = defineProps({
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
title:''
|
||
|
|
})
|
||
|
|
const emit = defineEmits(['update:show'])
|
||
|
|
const close=()=>{
|
||
|
|
emit('update:show',false)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<van-popup
|
||
|
|
:show="show"
|
||
|
|
:transition-appear="true"
|
||
|
|
teleport="#__nuxt"
|
||
|
|
position="bottom"
|
||
|
|
@click-overlay="close"
|
||
|
|
:style="{ height: '74%' }"
|
||
|
|
v-bind="{...$attrs,...$props}"
|
||
|
|
:safe-area-inset-bottom="true"
|
||
|
|
>
|
||
|
|
<div class="flex flex-col h-full">
|
||
|
|
<!-- 标题栏 -->
|
||
|
|
<div class="flex items-center pl-16px pr-19px h-40px border-b-1px border-gray-300 shrink-0 relative w-full">
|
||
|
|
<slot v-if="$slots.title" name="title">
|
||
|
|
</slot>
|
||
|
|
<div v-else class="text-black text-16px text-center flex-grow-1">{{ title }}</div>
|
||
|
|
<van-icon
|
||
|
|
style="position: absolute"
|
||
|
|
class="right-19px"
|
||
|
|
size="20"
|
||
|
|
name="cross"
|
||
|
|
color="#939393"
|
||
|
|
@click="close"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 内容区域 -->
|
||
|
|
<div class="flex-1 px-16px py-18px overflow-hidden relative">
|
||
|
|
<div class="h-full overflow-y-auto relative list-container">
|
||
|
|
<slot/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</van-popup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|