63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<template>
|
|
<view @click="onClick">
|
|
<image v-if="widthL" :style="{width, height}" :src="_src" mode="widthFix"></image>
|
|
<image v-else :style="{width, height}" :src="_src" mode="heightFix"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name:"chat-item-image",
|
|
props: {
|
|
src: '',
|
|
},
|
|
data() {
|
|
return {
|
|
width: '400rpx',
|
|
height: '400rpx',
|
|
_src: '',
|
|
widthL: true
|
|
};
|
|
},
|
|
methods: {
|
|
onClick() {
|
|
this.$emit("click")
|
|
}
|
|
},
|
|
watch: {
|
|
src: {
|
|
immediate: true,
|
|
handler(val){
|
|
|
|
uni.getImageInfo({
|
|
src: val,
|
|
success: (image)=> {
|
|
this._src = image.path
|
|
console.log("image", image);
|
|
const maxWidth = uni.upx2px(300)
|
|
const maxHeight = uni.upx2px(300)
|
|
// 是否越界
|
|
const wR = image.width < maxWidth
|
|
const hR = image.height < maxHeight
|
|
// 获得长边
|
|
const wL = image.width > image.height
|
|
console.log(image.width,image.height,wL);
|
|
if(wR && hR){
|
|
this.width = image.width + 'px'
|
|
this.height = image.height + 'px'
|
|
}else {
|
|
this.widthL = wL
|
|
this.width = maxWidth + 'px'
|
|
this.height = maxHeight + 'px'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style> |