You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
190 lines
2.6 KiB
190 lines
2.6 KiB
<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 {
|
|
img_src: this.src,
|
|
loading: true
|
|
}
|
|
},
|
|
methods: {
|
|
load(event){
|
|
this.loading = false;
|
|
},
|
|
error(event){
|
|
this.loading = false;
|
|
this.img_src = this.$props.errSrc;
|
|
},
|
|
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>
|