<template>
<image :src="src" mode="aspectFill" @load="singlePicLoad" :style="{width:w+'rpx',height:h+'rpx'}" @click="onclick"></image>
</template>
<script>
export default {
name: 'single-pic',
data() {
return {
w: 0,
h: 0
}
},
props: {
src: {
type: String,
default: ''
}
},
computed: {
},
mounted() {
},
beforeDestroy() {
},
methods: {
// 单张图片的时候显示规律
singlePicLoad(e){
console.log(e)
let t = this,
w = e.detail.width || 1,
h = e.detail.height || 1,
r = w/h
// 垂直细长图片，让高度完全展示
if(r<1/3){
t.w = 300*r
t.h = 300
}
if(r>=1/3 && r<1){
t.w = 200*r
t.h = 200
}
if(r>=1&&r<=3){
t.w = 400
t.h = 400/r
}
// 水平细长图片
if(r>3){
t.w = 500
t.h = 500/r
}
},
onclick(){
this.$emit('onclick')
}
}
} </script>
<style lang="scss" scoped>
</style>
