charge_miniapp/components/ax-body/ax-body.vue

<template>
	<view class="ax ax-body" :style="[StyleSheet]">
		<ax-custom-title v-if="$slots.title" @display="$emit('display',$event)"><slot name="title"></slot></ax-custom-title>
		<ax-custom-title v-else @display="$emit('display',$event)"></ax-custom-title>
		<view class="__root"><slot></slot></view>
		<ax-ios-indicator v-if="hideIndicatorArea==false"></ax-ios-indicator>
	</view>
</template>

<script>
	export default {
		name:"ax-body",
		props:{
			// 两侧留白范围
			blank:{type:[Number,String],default:10},
			// 隐藏指示器范围占位
			hideIndicatorArea:{type:Boolean,default:false}
		},
		mounted() {
			uni.createSelectorQuery().in(this).select(".__root").boundingClientRect((data) => {
				if(data) this.$emit('init',data);
			}).exec();
		},
		computed:{
			StyleSheet(){
				return {
					'--blank': `${Number(this.blank) || 0}px`
				}
			}
		}
	}
</script>

<style>
.ax-body{
	display: flex;
	flex-direction: column;
	height: 100%;
}
.ax-body .__root{
	flex: 1;
	overflow: auto;
	padding-left: var(--blank) !important;
	padding-right: var(--blank) !important;
}
ax-custom-title{
	position: relative;
	z-index: 99999999;
}
</style>