118 lines
2.2 KiB
Vue
118 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<van-popup
|
|||
|
|
v-model:show="visible"
|
|||
|
|
position="bottom"
|
|||
|
|
:style="{ height: height }"
|
|||
|
|
round
|
|||
|
|
:closeable="closeable"
|
|||
|
|
>
|
|||
|
|
<div class="popup-container">
|
|||
|
|
<!-- 头部区域 -->
|
|||
|
|
<div class="popup-header-fixed">
|
|||
|
|
<h3 class="popup-title">{{ title }}</h3>
|
|||
|
|
|
|||
|
|
<!-- 子标题/统计信息 -->
|
|||
|
|
<div v-if="subtitle || hasActions" class="header-stats">
|
|||
|
|
<span v-if="subtitle" class="stats-text" v-html="subtitle" />
|
|||
|
|
<!-- 额外操作插槽 -->
|
|||
|
|
<slot name="header-actions"></slot>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 内容区域（可滚动） -->
|
|||
|
|
<div class="popup-scroll-content">
|
|||
|
|
<slot></slot>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</van-popup>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { computed, useSlots } from 'vue'
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
modelValue: {
|
|||
|
|
type: Boolean,
|
|||
|
|
required: true
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
subtitle: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
height: {
|
|||
|
|
type: String,
|
|||
|
|
default: '80%'
|
|||
|
|
},
|
|||
|
|
closeable: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['update:modelValue'])
|
|||
|
|
|
|||
|
|
const slots = useSlots()
|
|||
|
|
|
|||
|
|
// 双向绑定
|
|||
|
|
const visible = computed({
|
|||
|
|
get: () => props.modelValue,
|
|||
|
|
set: (value) => emit('update:modelValue', value)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 判断是否有操作按钮
|
|||
|
|
const hasActions = computed(() => !!slots['header-actions'])
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.popup-container {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-header-fixed {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
padding: 16px;
|
|||
|
|
background-color: var(--van-background-2, #f7f8fa);
|
|||
|
|
border-bottom: 1px solid var(--van-border-color, #ebedf0);
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin: 0;
|
|||
|
|
text-align: center;
|
|||
|
|
color: var(--van-text-color, #323233);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-stats {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-top: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats-text {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: var(--van-text-color-2, #646566);
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-scroll-content {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
}
|
|||
|
|
</style>
|