瀏覽代碼

增加插槽message-side

fan 4 年之前
父節點
當前提交
93dc874ea6
共有 2 個文件被更改,包括 42 次插入21 次删除
  1. 3 2
      examples/App.vue
  2. 39 19
      packages/components/index.vue

+ 3 - 2
examples/App.vue

@@ -57,6 +57,7 @@
               ($refs.IMUI ? $refs.IMUI.drawerVisible : false) ? "关闭" : "打开"
             }}抽屉</small
           >
+          <br />
         </template>
       </lemon-imui>
       <a
@@ -1296,8 +1297,8 @@ export default {
 
     const { IMUI } = this.$refs;
     setTimeout(() => {
-      console.log(IMUI.hasContact("cont1act-3"));
-    }, 2000);
+      IMUI.changeContact('contact-1');
+    }, 500);
 
     IMUI.setLastContentRender("event", message => {
       return `[自定义通知内容]`;

+ 39 - 19
packages/components/index.vue

@@ -478,23 +478,34 @@ export default {
               curact
             )}
           </div>
-          <lemon-messages
-            ref="messages"
-            hide-time={this.hideMessageTime}
-            hide-name={this.hideMessageName}
-            time-format={this.messageTimeFormat}
-            reverse-user-id={this.user.id}
-            on-reach-top={this._emitPullMessages}
-            messages={this.currentMessages}
-          />
-          <lemon-editor
-            ref="editor"
-            tools={this.editorTools}
-            sendText={this.sendText}
-            sendKey={this.sendKey}
-            onSend={this._handleSend}
-            onUpload={this._handleUpload}
-          />
+          <div class="lemon-vessel">
+            <div class="lemon-vessel__left">
+              <lemon-messages
+                ref="messages"
+                hide-time={this.hideMessageTime}
+                hide-name={this.hideMessageName}
+                time-format={this.messageTimeFormat}
+                reverse-user-id={this.user.id}
+                on-reach-top={this._emitPullMessages}
+                messages={this.currentMessages}
+              />
+              <lemon-editor
+                ref="editor"
+                tools={this.editorTools}
+                sendText={this.sendText}
+                sendKey={this.sendKey}
+                onSend={this._handleSend}
+                onUpload={this._handleUpload}
+              />
+            </div>
+            <div class="lemon-vessel__right">
+              {useScopedSlot(
+                this.$scopedSlots["message-side"],
+                null,
+                curact
+              )}
+            </div>
+          </div>
         </div>
       );
       nodes.push(
@@ -1051,10 +1062,9 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
   background #efefef
   display flex
   flex-direction column
-  +e(scroll){
+  +e(scroll)
     overflow-y auto
     scrollbar-light()
-  }
   +e(label)
     padding 6px 14px 6px 14px
     color #666
@@ -1074,6 +1084,16 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
     padding 15px 15px
   +e(displayname)
     font-size 16px
++b(lemon-vessel)
+  display flex
+  flex 1
+  +e(left)
+    display flex
+    flex-direction column
+    height 100%
+    flex 1
+  +e(right)
+    flex 0
 +b(lemon-messages)
   flex 1
   height auto