增加width、height、theme、simple参数，修复快捷发送可以发送空消息的问题，优化文档

2021-01-18 21:42:54 +08:00
parent 1e626ee84e
commit e88da7ae19
8 changed files with 104 additions and 15 deletions
@@ -10,6 +10,7 @@
      <lemon-imui
        :user="user"
        ref="IMUI"
+        :theme="theme"
        :hide-menu="hideMenu"
        :hide-menu-avatar="hideMenuAvatar"
        :hide-message-name="hideMessageName"
@@ -57,6 +58,8 @@
          >切换头像显示</lemon-button
        >
        <lemon-button @click="changeMessageNameVisible">切换聊天窗口内联系人名字显示</lemon-button>
+        <br/>
+        <lemon-button @click="changeTheme">切换主题，当前主题：{{this.theme}}</lemon-button>
      </div>

    </div>
@@ -220,6 +223,34 @@
          <td width="100">-</td>
          <td>{id: "1",displayName: "测试",avatar: "url"};</td>
        </tr>
+        <tr>
+          <td width="150">width</td>
+          <td width="350">宽度</td>
+          <td width="150">String</td>
+          <td width="100">850px</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td width="150">height</td>
+          <td width="350">高度</td>
+          <td width="150">String</td>
+          <td width="100">580px</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td width="150">theme</td>
+          <td width="350">主题</td>
+          <td width="150">default | blue</td>
+          <td width="100">default</td>
+          <td>主题颜色</td>
+        </tr>
+        <tr>
+          <td width="150">simple</td>
+          <td width="350">精简模式</td>
+          <td width="150">Boolean</td>
+          <td width="100">false</td>
+          <td>精简模式下左侧的导航和联系人列表会隐藏，初始化时需要手动调用 changeContact 切换到聊天视图。</td>
+        </tr>
        <tr>
          <td>messageTimeFormat</td>
          <td>消息列表时间格式化函数</td>
@@ -652,6 +683,7 @@ export default {
  name: "app",
  data() {
    return {
+      theme:'default',
      tip:tip,
      packageData,
      hideMenuAvatar: false,
@@ -705,6 +737,9 @@ export default {

    const { IMUI } = this.$refs;

+    // setTimeout(()=>{
+    //   IMUI.changeContact('contact-1');
+    // },2000);
    
    let data = [
      { ...contactData1 },
@@ -1117,6 +1152,9 @@ export default {
    })
  },
  methods: {
+    changeTheme(){
+      this.theme = this.theme == 'default' ? 'blue' : 'default';
+    },
    scrollToTop(){
      document.body.scrollIntoView();
    },
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.895c486f.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.26d175a9.js rel=preload as=script><link href=css/index.895c486f.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.26d175a9.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>Lemon IMUI</title><link href=css/index.4f9dd622.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.7a6ff8e6.js rel=preload as=script><link href=css/index.4f9dd622.css rel=stylesheet></head><body><noscript><strong>We're sorry but flat-im doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.e4810482.js></script><script src=js/index.7a6ff8e6.js></script></body></html>
@@ -1,6 +1,6 @@
 {
  "name": "lemon-imui",
-  "version": "1.0.8",
+  "version": "1.0.9",
  "main": "dist/index.umd.min.js",
  "description": "基于 VUE2.0 的 IM 聊天组件",
  "homepage": "https://github.com/fanjyy/lemon-imui",
@@ -220,7 +220,7 @@ export default {
    },
    _handleKeydown(e) {
      const { keyCode,ctrlKey } = e;
-      if (keyCode == 13 && ctrlKey === true) {
+      if (keyCode == 13 && ctrlKey === true && this.submitDisabled == false) {
        this._handleSend();
      }
    },
@@ -26,6 +26,22 @@ export default {
    };
  },
  props: {
+    width:{
+      type:String,
+      default:"850px",
+    },
+    height:{
+      type:String,
+      default:"580px",
+    },
+    theme:{
+      type:String,
+      default:'default',
+    },
+    simple:{
+      type:Boolean,
+      default:false,
+    },
    /**
     * 消息时间格式化规则
     */
@@ -70,13 +86,17 @@ export default {
  },

  render() {
-    return this._renderWrapper([
-      this._renderMenu(),
-      this._renderSidebarMessage(),
-      this._renderSidebarContact(),
-      this._renderContainer(),
-      this._renderDrawer()
-    ]);
+    const nodes = []
+    if(this.simple == false){
+      nodes.push(...[
+        this._renderMenu(),
+        this._renderSidebarMessage(),
+        this._renderSidebarContact(),
+      ])
+    }
+    nodes.push(this._renderContainer())
+    nodes.push(this._renderDrawer())
+    return this._renderWrapper(nodes);
  },
  created() {
    this.initMenus();
@@ -215,8 +235,13 @@ export default {
    _renderWrapper(children) {
      return (
        <div
+          style={{
+            width:this.width,
+            height:this.height
+          }}
          class={[
            "lemon-wrapper",
+            `lemon-wrapper--theme-${this.theme}`,
            this.drawerVisible && "lemon-wrapper--drawer-show"
          ]}
        >
@@ -764,14 +789,11 @@ export default {
 };
 </script>
 <style lang="stylus">
-wrapper-width = 850px
 drawer-width = 200px
 bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
@import '~styles/utils/index'

 +b(lemon-wrapper)
-  width wrapper-width
-  height 580px
  display flex
  font-size 14px
  //mask-image radial-gradient(circle, white 100%, black 100%)
@@ -872,4 +894,33 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
    font-weight normal
    margin 10px 0 20px 0
    user-select none
+.lemon-wrapper--theme-blue
+  .lemon-message__content
+    background #f3f3f3
+    &::before
+      border-right-color #f3f3f3
+  .lemon-message--reverse .lemon-message__content
+    background #e6eeff
+    &::before
+      border-left-color #e6eeff
+  .lemon-container
+    background #fff
+  .lemon-sidebar
+    background #f9f9f9
+    .lemon-contact
+      background #f9f9f9
+      &:hover:not(.lemon-contact--active)
+        background #f1f1f1
+      &--active
+        background #e9e9e9
+  .lemon-menu
+    background #096bff
+  .lemon-menu__item
+    color rgba(255,255,255,0.4)
+    &:hover:not(.lemon-menu__item--active)
+      color rgba(255,255,255,0.6)
+    &--active
+      color #fff
+      text-shadow 0 0 10px rgba(2,48,118,0.4)
+
 </style>