yuezhilian-c/src/components/NoData/NoData.vue

<template>
	<view class="nodata" v-if="show">
		<view class="main" :style="{paddingTop:topNum+'%'}">
			<image class="nodata-img" mode="widthFix" :src="backImageUrl?backImageUrl+imgUrl:''"></image>
			<text class="nodata-content" v-if="content">{{ content || '' }}</text>
			<text class="nodata-title" v-if="title">{{ title || '' }}</text>
			<text class="nodata-desc" v-if="desc">{{ desc || '' }}</text>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue
	} from 'vue-property-decorator';
	// import {
	// 	Getter,
	// 	Mutation
	// } from 'vuex-class';
	import {
		OSS_STATIC
	} from '@/common/constants';
	@Component({})

	export default class NoData extends Vue {
		@Prop({
			default: false
		}) show ? : boolean; //是否展示
		@Prop({
			default: 30
		}) topNum ? : number; //距离顶部的距离
		@Prop({
			default: "没有数据"
		}) title ? : string; //title展示
		@Prop({
			default: ""
		}) content ? : string; //content展示
		@Prop({
			default: ""
		}) desc ? : string; //desc展示
		@Prop({
			default: "search-empty.svg"
		}) imgUrl ?: string;
		backImageUrl: string = OSS_STATIC //oss地址

		created() {}
		mounted() {}
		//methods---------------

	}
</script>

<style lang='scss' scoped>
	.nodata {
		position: relative;
		text-align: center;

		.main {
			@include flex-y();

			.nodata-img {
				margin-bottom: vw(10);
				/* @include wh(148, 146); */
				width: vw(200);
				/* flex: 0; */
			}

			.nodata-content {
				@include word-vw(16, #333333);
				font-weight: bold;
			}

			.nodata-title {
				/* margin-top: vw(6); */
				flex: 0;
				/* width: vw(200); */
				font-size: vw(14);
				color: $gray9;
				line-height: vw(19);
			}

			.nodata-desc {
				flex: 1;
				width: vw(200);
				line-height: vw(19);
				font-size: vw(12);
				color: $gray9;
				margin-top: vw(10);
			}
		}
	}
</style>