zhywpt-sp/components/empty-view/empty-view.vue

<!-- 空界面 -->
<template>
	<view class="empty-view">
		<u-empty :text="content" :src="src" :mode="mode" :color="config.color" :icon-color="config.iconColor" :icon-size="config.iconSize" :font-size="config.fontSize" :margin-top="config.marginTop">
			<template v-slot:bottom  class="btn">
				<button type="default" class="button" @click="emits('btnClick')" v-if="!isBlank(btnTxt)">{{btnTxt}}</button>
			</template>
		</u-empty>
	</view>
</template>

<script setup lang="ts">
	const emits = defineEmits(['btnClick']);
	import {isBlank} from "@/utils/utils";
	defineProps({
		//参照https://vkuviewdoc.fsq.pub/components/empty.html说明，也可自定义图片路径
		mode:{
			type:String,
			default:'list'
		},
		
		//图片路径
		src:{
			type:String,
			default:''
		},
		
		//显示内容
		content:{
			type:String,
			default:''
		},
		
		//按钮显示文字 有-显示按钮  无-不显示按钮
		btnTxt:{
			type:String,
			default:''
		}
	})
	
	const config = {
		'iconColor':'#90999999',
		'iconSize':'140',
		'color':'#999999',
		'fontSize':'28',
		'marginTop':'30'
	};
	
</script>

<style lang="scss" scoped>

.empty-view{
	width: 100vw;
	padding-top: 100rpx;
	button::after{
		border: none;
	}
	.button{
		background: linear-gradient(to right,#13E7C1,#43A1E0);
		opacity: 1;
		border-radius: 10rpx;
		color: #fff;
		font-size: 26rpx;
		height: 60rpx;
		padding: 0rpx 30rpx;
		line-height: 60rpx;
		box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223,223,223,0.5);
	}
}
</style>