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>