nvue聊天窗口

components/im/imIMG.vue

@@ -1,20 +1,47 @@
 <template>
-    <view>
-        图片消息
+    <view class="im--img" :class="guest ? 'right': 'left'">
+        <image class="src" :src="msg" @click="openImg" mode="widthFix"></image>
     </view>
 </template>
 
 <script>
     export default {
         name:"im",
-        data() {
-            return {
-                
-            };
+        props:{
+            msg : {
+                type   : String,
+                default: 'https://images.pexels.com/photos/9024609/pexels-photo-9024609.jpeg'
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
+        },
+        methods:{
+            openImg(){
+                uni.previewImage({
+                    urls    : [this.msg],
+                    current : 1
+                })
+            }
         }
     }
 </script>
 
-<style lang="scss">
-
+<style scoped>
+    .im--img{
+        padding: 19rpx;
+    }
+    .im--img.left{
+        border-radius: 0 20rpx 20rpx 20rpx;
+        background: white;
+    }
+    
+    .im--img.right{
+        border-radius: 20rpx 0 20rpx 20rpx;
+        background: #34CE98;
+    }
+    .src{
+        width: 240rpx;
+    }
 </style>