H5-frontend/components/fs-empty/fs-empty.vue

<template>
	<view class="fs-empty-box" :style="{ padding: padding }">
		<image :src="src" mode="widthFix" :style="{ width: imageWidth }"></image>
		<view class="content">{{ text }}</view>
		<slot></slot>
	</view>
</template>

<script>
/**
 * 无数据组件
 * @description 无数据组件
 * @property {String} src 图片地址
 * @property {String} text 文字
 * @property {String} padding 内边距
 * @property {String} imageWidth 图片宽度
 */
export default {
	name: 'fs-empty'
}
</script>

<script setup>
import empty from './empty.png'

const props = defineProps({
	src: {
		type: String,
		default: empty
	},
	text: {
		type: String,
		default: '暂无数据'
	},
	padding: {
		type: String,
		default: '200rpx 30rpx'
	},
	imageWidth: {
		type: String,
		default: '400rpx'
	}
})
</script>

<style lang="scss" scoped>
.fs-empty-box {
	text-align: center;

	.content {
		margin-top: 20rpx;
	}
}
</style>