ykz-wx/components/pub-loading-view/pub-loading-view.vue

<template>
	<view class="pub-loading">
		<view v-if="loaded" class="load-view" :style="`height: ${height};width: ${width};`">
			<uni-load-more :status="status" :content-text="contentText" :showText="showText" />
		</view>
		<view v-else>
			<slot />
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		name: 'PubLoadingView',
		computed: {
			contentText() {
				let _text = {
					contentdown: this.text,
					contentrefresh: this.text,
					contentnomore: '没有更多数据了',
				}
				return _text;
			}
		},
		props: {
			loaded: {
				type: Boolean,
				default: false
			},
			status: {
				type: String,
				default: "loading"
			},
			text: {
				type: String,
				default: "数据加载中..."
			},
			height: {
				type: String,
				default: "100vh"
			},
			width: {
				type: String,
				default: "100%"
			},
			showText: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {

			}
		},
	}
</script>
<style lang="scss" scoped>
	.pub-loading {
		// height: 100%;

		.load-view {
			width: 100%;
			// height: 400rpx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			@include flex-center;
		}

		.full-height {
			height: 100vh;
		}
	}
</style>