ec.uniapp-master/components/lf-nocontent/lf-nocontent.vue

<template>
	<view class="empty-box" style="margin: 100rpx 0;text-align: center;">
		<view class="empty-image">
			<image :src="src" mode="aspectFill" style="margin: 0 auto;width: 520rpx;"></image>
		</view>
		<view class="content m-text-center m-m-t-20">
			<view class="m-font-32" style="color: #777777;">{{ text }}</view>
		</view>
		<button class="m-m-t-32 empty-button" v-if="showButton" @click="$emit('clickButton')">{{ buttonTitle }}</button>
	</view>
</template>

<script>
	export default {
		name:"lf-empty",
		props: {
			text: {
				type: String, // 空消息提示语
				default: '暂无数据'
			},
			src: {
				type: String, // 空消息提示的图片
				default: ''
			},
			showButton: {
				type: Boolean, // 是否显示按钮
				default: false
			},
			buttonTitle: {
				type: String, // 按钮上的文字，当showButton == true时显示
				default: '去逛逛'
			}
		}
	}
</script>

<style lang="scss">
.empty-button{
	min-width: 170rpx;
	max-width: max-content;
	height: 68rpx;
	background-color: #FEFEFE;
	font-size: 30rpx;
	color: #666666;
	line-height: 66rpx;
	text-align: center;
	border-radius: 6rpx;
	border: 2rpx solid #E4E4E4;
}
</style>