blindDate/components/lf-image/lf-image.vue

<template>
	<image 
		:class="{'loading': loading}"
		:data-loading-text="loadingText"
		:src="img_src" 
		:mode="mode" 
		:lazy-load="true" 
		@click="click"
		@load="load" 
		@error="error">
	</image>
</template>

<script>
	export default {
		props: {
			src: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: 'scaleToFill'
			},
			errSrc: {
				type: String,
				default: '../../static/images/empty.png'
			},
			loadingText: {
				type: String,
				default: '正在加载中'
			}
		},
		data(){
			return {
				is_err: false,
				loading: true
			}
		},
		
		computed: {
			img_src(){
				if(this.is_err){
					return this.errSrc;
				}else{
					return this.src || this.errSrc;
				}
			}
		},
		methods: {
			load(event){
				this.loading = false;
			},
			error(event){
				this.loading = false;
				this.is_err = true;
			},
			click(event){
				this.$emit('click', event);
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	image{
		width: 100%;
		height: 100%;
	}
	.loading{
		position: relative;
		// background-color: #e5e5e5;
		background: linear-gradient(-45deg, #e5e5e5, #d9d9d9, #f1f3f5, #f0f0f0);
		animation: gradientBG 15s ease infinite;
		background-size: 400% 400%;
		transition: all 1s;
		&::after{
			content: attr(data-loading-text);
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			color: #969696;
			font-size: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			animation: flicker-in-1 2s linear both infinite;
			transition: all 2s;
		}
	}
	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}
	@keyframes flicker-in-1 {
	  0% {
	    opacity: 0.5;
	  }
	  10% {
	    opacity: 0.5;
	  }
	  10.1% {
	    opacity: 1;
	  }
	  10.2% {
	    opacity: 0.5;
	  }
	  20% {
	    opacity: 0.5;
	  }
	  20.1% {
	    opacity: 1;
	  }
	  20.6% {
	    opacity: 0.5;
	  }
	  30% {
	    opacity: 0.5;
	  }
	  30.1% {
	    opacity: 1;
	  }
	  30.5% {
	    opacity: 1;
	  }
	  30.6% {
	    opacity: 0.5;
	  }
	  45% {
	    opacity: 0.5;
	  }
	  45.1% {
	    opacity: 1;
	  }
	  50% {
	    opacity: 1;
	  }
	  55% {
	    opacity: 1;
	  }
	  55.1% {
	    opacity: 0.5;
	  }
	  57% {
	    opacity: 0.5;
	  }
	  57.1% {
	    opacity: 1;
	  }
	  60% {
	    opacity: 1;
	  }
	  60.1% {
	    opacity: 0.5;
	  }
	  65% {
	    opacity: 0.5;
	  }
	  65.1% {
	    opacity: 1;
	  }
	  75% {
	    opacity: 1;
	  }
	  75.1% {
	    opacity: 0.5;
	  }
	  77% {
	    opacity: 0.5;
	  }
	  77.1% {
	    opacity: 1;
	  }
	  85% {
	    opacity: 1;
	  }
	  85.1% {
	    opacity: 0.5;
	  }
	  86% {
	    opacity: 0.5;
	  }
	  86.1% {
	    opacity: 1;
	  }
	  100% {
	    opacity: 1;
	  }
	}
</style>