nvue聊天窗口

components/im/imTXT.vue

@@ -1,6 +1,6 @@
 <template>
-    <view>
-        文字消息
+    <view class="im--box">
+        <text class="im--text" :class="guest ? 'right': 'left'">{{msg}}</text>
     </view>
 </template>
 
@@ -11,10 +11,38 @@
             return {
                 
             };
+        },
+        props:{
+            msg : {
+                type   : String,
+                default: '文字消息'
+            },
+            guest: {
+                type: Boolean,
+                default: true
+            }
         }
     }
 </script>
 
-<style lang="scss">
-
+<style scoped>
+    .im--text{
+        max-width: 400rpx;
+        padding: 20rpx;
+        font-size: 28rpx;
+        line-height: 40rpx;
+        min-height: 40rpx;
+        min-width: 50rpx;
+    }
+    
+    .im--text.left{
+        border-radius: 0 20rpx 20rpx 20rpx;
+        background: white;
+    }
+    
+    .im--text.right{
+        border-radius: 20rpx 0 20rpx 20rpx;
+        background: #34CE98;
+        color: white;
+    }
 </style>