第一次提交

components/chat-item-image/chat-item-image.vue

@@ -0,0 +1,63 @@
+<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>