WechatApp/components/Modal/ScrollPopup.vue

<template>
	<BasicModal type="bottom" v-model:open="getOpen">
		<view class="popup-content flex flex-y" :style="getStyle">
		  <view class="popup-content__close" @click="getOpen = false" v-if="close">
			<text>关闭按钮</text>
			<image :src="getFileUrl('/modal/close.png')" mode="aspectFill"></image>
		  </view>
		  
		  <view class="popup-content__header" v-if="title || $slots.title">
			<slot name="title">
				<view class="default-header-slot">{{ title }}</view>
			</slot>
			<slot name="search"></slot>
		  </view>
		  
		  <scroll-view
		    @scrolltolower="emit('scrolltolower')"
		    scroll-y
		    class="popup-content__scroll flex-1"
			:style="[scrollViewStyle]"
		  >
		    <view style="overflow: hidden;">
				<slot> 中间区域 可以滚动的哦~ </slot>
			</view>
		  </scroll-view>
		  
		  <view class="popup-content__footer" v-if="!hideFooter">
		    <slot name="footer" >
			  <view class="default-footer-slot">
				<view v-if="showCancelBtn" class="default-footer-slot___cancel" @click="getOpen = false">取消</view>
				<view class="default-footer-slot___ok" @click="emit('ok')">确认</view>
			  </view>
			</slot>
		  </view>
		</view>
	</BasicModal>
</template>

<script setup>
	import { computed } from "vue";
	import BasicModal from "./BasicModal.vue"
	import { getFileUrl } from "@/utils/file.js";
	
	const emit = defineEmits(['scrolltolower', 'update:open', 'ok'])
	const props = defineProps({
		open: { type: Boolean },
		height: { type: [Number, String] },
		title: { type: String },
		styles: { type: Object, default: () => {} },
		scrollViewStyle: { type: Object, default: () => {} },
		close: { type: Boolean, default: true },
		hideFooter: { type: Boolean, default: false },
		showCancelBtn: { type: Boolean, default: false }
	})
	const getOpen = computed({
		get: () => props.open,
		set: (v) => emit('update:open', v)
	})
	
	const getStyle = computed(() => {
		const { height } = props;
		let s = `${height}`;
		s = height ? `${s.replace('rpx', '')}rpx` : 'calc(100vh - 330rpx)';
		return {
			height: s,
			...props.styles
		}
	})
</script>

<style scoped lang="scss">
	.popup-content {
	  height: 100%;
	  border-radius: 16rpx 16rpx 0 0;
	  background: #fff;
	  overflow: hidden;
	  padding-top: 36rpx;
	  position: relative;
	  
	  &__close{
		position: absolute;
		right: 0;
		top: 0;
		z-index: 3;
		padding: 34rpx;
		image{
			width: 22rpx;
			height: 24rpx;
		}
	  }
	  
	  &__header {
	    position: sticky;
	    top: 0;
	    z-index: 2;
		.default-header-slot{
			font-weight: bold;
			font-size: 36rpx;
			color: #010101;
			line-height: 35rpx;
			text-align: center;
			padding-bottom: 36rpx;
		}
	  }
	
	  &__scroll {
	    // padding: 12rpx 30rpx 0;
	    padding: 12rpx 30rpx 0;
	    height: 0;
		box-sizing: border-box;
		overflow: hidden;
	  }
	
	  &__footer {
	    position: sticky;
	    bottom: 0;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #EEEEEE;
		
		.default-footer-slot{
			display: flex;
			margin: 0 -15rpx;
			&___cancel, &___ok{
				width: 100%;
				border-radius: 8rpx;
				font-weight: bold;
				font-size: 28rpx;
				line-height: 80rpx;
				text-align: center;
				letter-spacing: 2rpx;
				margin: 0 15rpx;
				border: 0.2rpx solid #1677FF;
				color: #1677FF;
			}
			&___ok{
				color: #FFFFFF;
				background: #1677FF;
			}
		}
		
	  }
	}
</style>