share_h5/components/noData/nodata.vue

<template>
	<view class="no-data-view" :style="{'margin-top':conf.top+'vh'}">
		<image v-if="conf.imgUrl" :style="{width:conf.imgWidth,height:config.imgHeight}" :src="conf.imgUrl?conf.imgUrl:'@/static/nodata.png'"></image>
		<image v-if="!conf.imgUrl"	class="no-data" src="@/static/nodata.png"></image>
		<view :style="{color:conf.color,'font-size':conf.fSize,'padding-top':conf.txtTop+'rpx'}">{{conf.content}}</view>
	</view>
</template>

<script>
	export default {
		name: 'nodata',
		props:{
			config:{
				type:Object,
				default:function(){
					return{
					}
				}
			},
		},
		data() {
			return {
				conf:{
						type:'1',
						top:22,
						imgWidth:0,
						imgHeight:0,
						imgUrl:'',
						content:'没有商品了~',
						fSize:30,
						color:'#B3B3B3',
						txtTop:20,
					}
			}
		},
		created() {
			this.init();
		},
		methods: {
			init(){
				this.conf = Object.assign(this.conf, this.config);
			}
		}
	}
</script>

<style scoped>
	.no-data-view{
		text-align: center;
	}
	.no-data{
		width: 475rpx;
		height: 335rpx;
	}
	
</style>