增加抽屉功能

dist/index.common.js

@@ -2544,6 +2544,9 @@ function _toConsumableArray(arr) {
 // EXTERNAL MODULE: ./node_modules/_core-js@2.6.12@core-js/modules/es6.string.starts-with.js
 var es6_string_starts_with = __webpack_require__("d31c");
 
+// EXTERNAL MODULE: ./node_modules/_core-js@2.6.12@core-js/modules/es6.object.assign.js
+var es6_object_assign = __webpack_require__("6ba0");
+
 // EXTERNAL MODULE: ./node_modules/_core-js@2.6.12@core-js/modules/es6.array.sort.js
 var es6_array_sort = __webpack_require__("3441");
 
@@ -2666,6 +2669,9 @@ var memory_MemoryCache = /*#__PURE__*/function () {
 
 
 
+
+
+
 function componentsvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { componentsvue_type_script_lang_js_ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { componentsvue_type_script_lang_js_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -2679,6 +2685,14 @@ function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1
 var allMessages = {};
 var emojiMap = {};
 
+var componentsvue_type_script_lang_js_toPx = function toPx(val) {
+  return isString(val) ? val : "".concat(val, "px");
+};
+
+var toPoint = function toPoint(str) {
+  return str.replace("%", "") / 100;
+};
+
 var renderDrawerContent = function renderDrawerContent() {};
 
 /* harmony default export */ var componentsvue_type_script_lang_js_ = ({
@@ -2690,12 +2704,12 @@ var renderDrawerContent = function renderDrawerContent() {};
   },
   props: {
     width: {
-      type: String,
-      default: "850px"
+      type: [String, Number],
+      default: 850
     },
     height: {
-      type: String,
-      default: "580px"
+      type: [String, Number],
+      default: 580
     },
     theme: {
       type: String,
@@ -2969,9 +2983,10 @@ var renderDrawerContent = function renderDrawerContent() {};
       var h = this.$createElement;
       return h("div", {
         "style": {
-          width: this.width,
-          height: this.height
+          width: componentsvue_type_script_lang_js_toPx(this.width),
+          height: componentsvue_type_script_lang_js_toPx(this.height)
         },
+        "ref": "wrapper",
         "class": ["lemon-wrapper", "lemon-wrapper--theme-".concat(this.theme), {
           "lemon-wrapper--simple": this.simple
         }, this.drawerVisible && "lemon-wrapper--drawer-show"]
@@ -3140,7 +3155,8 @@ var renderDrawerContent = function renderDrawerContent() {};
     _renderDrawer: function _renderDrawer() {
       var h = this.$createElement;
       return this._menuIsMessages() && this.currentContactId ? h("div", {
-        "class": "lemon-drawer"
+        "class": "lemon-drawer",
+        "ref": "drawer"
       }, [renderDrawerContent(), useScopedSlot(this.$scopedSlots.drawer, "", this.currentContact)]) : "";
     },
     _isContactContainerCache: function _isContactContainerCache(name) {
@@ -3185,9 +3201,9 @@ var renderDrawerContent = function renderDrawerContent() {};
         }]
       }, [h("div", {
         "class": "lemon-container__title"
-      }, [h("div", {
+      }, [useScopedSlot(this.$scopedSlots["message-title"], h("div", {
         "class": "lemon-container__displayname"
-      }, [useScopedSlot(this.$scopedSlots["message-title"], curact.displayName, curact)])]), h("lemon-messages", {
+      }, [curact.displayName]), curact)]), h("lemon-messages", {
         "ref": "messages",
         "attrs": {
           "hide-time": this.hideMessageTime,
@@ -3737,12 +3753,49 @@ var renderDrawerContent = function renderDrawerContent() {};
     getMessages: function getMessages(contactId) {
       return (contactId ? allMessages[contactId] : allMessages) || [];
     },
-    changeDrawer: function changeDrawer(render) {
+    changeDrawer: function changeDrawer(params) {
       this.drawerVisible = !this.drawerVisible;
-      if (this.drawerVisible == true) this.openDrawer(render);
+      if (this.drawerVisible == true) this.openDrawer(params);
     },
-    openDrawer: function openDrawer(render) {
-      renderDrawerContent = render || new Function();
+    // openDrawer(data) {
+    //   renderDrawerContent = data || new Function();
+    //   this.drawerVisible = true;
+    // },
+    openDrawer: function openDrawer(params) {
+      renderDrawerContent = isFunction(params) ? params : params.render || new Function();
+      var wrapperWidth = this.$refs.wrapper.clientWidth;
+      var wrapperHeight = this.$refs.wrapper.clientHeight;
+      var width = params.width || 200;
+      var height = params.height || wrapperHeight;
+      var offsetX = params.offsetX || 0;
+      var offsetY = params.offsetY || 0;
+      var position = params.position || "right";
+      if (isString(width)) width = wrapperWidth * toPoint(width);
+      if (isString(height)) height = wrapperHeight * toPoint(height);
+      if (isString(offsetX)) offsetX = wrapperWidth * toPoint(offsetX);
+      if (isString(offsetY)) offsetY = wrapperHeight * toPoint(offsetY);
+      this.$refs.drawer.style.width = "".concat(width, "px");
+      this.$refs.drawer.style.height = "".concat(height, "px");
+      var left = 0;
+      var top = 0;
+      var shadow = "";
+
+      if (position == "right") {
+        left = wrapperWidth;
+      } else if (position == "rightInside") {
+        left = wrapperWidth - width;
+        shadow = "-15px 0 16px -14px rgba(0,0,0,0.08)";
+      } else if (position == "center") {
+        left = wrapperWidth / 2 - width / 2;
+        top = wrapperHeight / 2 - height / 2;
+        shadow = "0 0 20px rgba(0,0,0,0.08)";
+      }
+
+      left += offsetX;
+      top += offsetY + -1;
+      this.$refs.drawer.style.top = "".concat(top, "px");
+      this.$refs.drawer.style.left = "".concat(left, "px");
+      this.$refs.drawer.style.boxShadow = shadow;
       this.drawerVisible = true;
     },
     closeDrawer: function closeDrawer() {
@@ -5492,6 +5545,17 @@ try {
 }
 
 
+/***/ }),
+
+/***/ "6ba0":
+/***/ (function(module, exports, __webpack_require__) {
+
+// 19.1.3.1 Object.assign(target, source)
+var $export = __webpack_require__("e99b");
+
+$export($export.S + $export.F, 'Object', { assign: __webpack_require__("9f15") });
+
+
 /***/ }),
 
 /***/ "6bf8":
@@ -5938,6 +6002,52 @@ module.exports = function (it) {
 };
 
 
+/***/ }),
+
+/***/ "9f15":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+// 19.1.2.1 Object.assign(target, source, ...)
+var DESCRIPTORS = __webpack_require__("26df");
+var getKeys = __webpack_require__("93ca");
+var gOPS = __webpack_require__("0c29");
+var pIE = __webpack_require__("35d4");
+var toObject = __webpack_require__("8078");
+var IObject = __webpack_require__("1b96");
+var $assign = Object.assign;
+
+// should work with symbols and should have deterministic property order (V8 bug)
+module.exports = !$assign || __webpack_require__("0926")(function () {
+  var A = {};
+  var B = {};
+  // eslint-disable-next-line no-undef
+  var S = Symbol();
+  var K = 'abcdefghijklmnopqrst';
+  A[S] = 7;
+  K.split('').forEach(function (k) { B[k] = k; });
+  return $assign({}, A)[S] != 7 || Object.keys($assign({}, B)).join('') != K;
+}) ? function assign(target, source) { // eslint-disable-line no-unused-vars
+  var T = toObject(target);
+  var aLen = arguments.length;
+  var index = 1;
+  var getSymbols = gOPS.f;
+  var isEnum = pIE.f;
+  while (aLen > index) {
+    var S = IObject(arguments[index++]);
+    var keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S);
+    var length = keys.length;
+    var j = 0;
+    var key;
+    while (length > j) {
+      key = keys[j++];
+      if (!DESCRIPTORS || isEnum.call(S, key)) T[key] = S[key];
+    }
+  } return T;
+} : $assign;
+
+
 /***/ }),
 
 /***/ "a450":

dist/index.umd.js

@@ -2553,6 +2553,9 @@ function _toConsumableArray(arr) {
 // EXTERNAL MODULE: ./node_modules/_core-js@2.6.12@core-js/modules/es6.string.starts-with.js
 var es6_string_starts_with = __webpack_require__("d31c");
 
+// EXTERNAL MODULE: ./node_modules/_core-js@2.6.12@core-js/modules/es6.object.assign.js
+var es6_object_assign = __webpack_require__("6ba0");
+
 // EXTERNAL MODULE: ./node_modules/_core-js@2.6.12@core-js/modules/es6.array.sort.js
 var es6_array_sort = __webpack_require__("3441");
 
@@ -2675,6 +2678,9 @@ var memory_MemoryCache = /*#__PURE__*/function () {
 
 
 
+
+
+
 function componentsvue_type_script_lang_js_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { componentsvue_type_script_lang_js_ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { componentsvue_type_script_lang_js_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -2688,6 +2694,14 @@ function componentsvue_type_script_lang_js_objectSpread(target) { for (var i = 1
 var allMessages = {};
 var emojiMap = {};
 
+var componentsvue_type_script_lang_js_toPx = function toPx(val) {
+  return isString(val) ? val : "".concat(val, "px");
+};
+
+var toPoint = function toPoint(str) {
+  return str.replace("%", "") / 100;
+};
+
 var renderDrawerContent = function renderDrawerContent() {};
 
 /* harmony default export */ var componentsvue_type_script_lang_js_ = ({
@@ -2699,12 +2713,12 @@ var renderDrawerContent = function renderDrawerContent() {};
   },
   props: {
     width: {
-      type: String,
-      default: "850px"
+      type: [String, Number],
+      default: 850
     },
     height: {
-      type: String,
-      default: "580px"
+      type: [String, Number],
+      default: 580
     },
     theme: {
       type: String,
@@ -2978,9 +2992,10 @@ var renderDrawerContent = function renderDrawerContent() {};
       var h = this.$createElement;
       return h("div", {
         "style": {
-          width: this.width,
-          height: this.height
+          width: componentsvue_type_script_lang_js_toPx(this.width),
+          height: componentsvue_type_script_lang_js_toPx(this.height)
         },
+        "ref": "wrapper",
         "class": ["lemon-wrapper", "lemon-wrapper--theme-".concat(this.theme), {
           "lemon-wrapper--simple": this.simple
         }, this.drawerVisible && "lemon-wrapper--drawer-show"]
@@ -3149,7 +3164,8 @@ var renderDrawerContent = function renderDrawerContent() {};
     _renderDrawer: function _renderDrawer() {
       var h = this.$createElement;
       return this._menuIsMessages() && this.currentContactId ? h("div", {
-        "class": "lemon-drawer"
+        "class": "lemon-drawer",
+        "ref": "drawer"
       }, [renderDrawerContent(), useScopedSlot(this.$scopedSlots.drawer, "", this.currentContact)]) : "";
     },
     _isContactContainerCache: function _isContactContainerCache(name) {
@@ -3194,9 +3210,9 @@ var renderDrawerContent = function renderDrawerContent() {};
         }]
       }, [h("div", {
         "class": "lemon-container__title"
-      }, [h("div", {
+      }, [useScopedSlot(this.$scopedSlots["message-title"], h("div", {
         "class": "lemon-container__displayname"
-      }, [useScopedSlot(this.$scopedSlots["message-title"], curact.displayName, curact)])]), h("lemon-messages", {
+      }, [curact.displayName]), curact)]), h("lemon-messages", {
         "ref": "messages",
         "attrs": {
           "hide-time": this.hideMessageTime,
@@ -3746,12 +3762,49 @@ var renderDrawerContent = function renderDrawerContent() {};
     getMessages: function getMessages(contactId) {
       return (contactId ? allMessages[contactId] : allMessages) || [];
     },
-    changeDrawer: function changeDrawer(render) {
+    changeDrawer: function changeDrawer(params) {
       this.drawerVisible = !this.drawerVisible;
-      if (this.drawerVisible == true) this.openDrawer(render);
+      if (this.drawerVisible == true) this.openDrawer(params);
     },
-    openDrawer: function openDrawer(render) {
-      renderDrawerContent = render || new Function();
+    // openDrawer(data) {
+    //   renderDrawerContent = data || new Function();
+    //   this.drawerVisible = true;
+    // },
+    openDrawer: function openDrawer(params) {
+      renderDrawerContent = isFunction(params) ? params : params.render || new Function();
+      var wrapperWidth = this.$refs.wrapper.clientWidth;
+      var wrapperHeight = this.$refs.wrapper.clientHeight;
+      var width = params.width || 200;
+      var height = params.height || wrapperHeight;
+      var offsetX = params.offsetX || 0;
+      var offsetY = params.offsetY || 0;
+      var position = params.position || "right";
+      if (isString(width)) width = wrapperWidth * toPoint(width);
+      if (isString(height)) height = wrapperHeight * toPoint(height);
+      if (isString(offsetX)) offsetX = wrapperWidth * toPoint(offsetX);
+      if (isString(offsetY)) offsetY = wrapperHeight * toPoint(offsetY);
+      this.$refs.drawer.style.width = "".concat(width, "px");
+      this.$refs.drawer.style.height = "".concat(height, "px");
+      var left = 0;
+      var top = 0;
+      var shadow = "";
+
+      if (position == "right") {
+        left = wrapperWidth;
+      } else if (position == "rightInside") {
+        left = wrapperWidth - width;
+        shadow = "-15px 0 16px -14px rgba(0,0,0,0.08)";
+      } else if (position == "center") {
+        left = wrapperWidth / 2 - width / 2;
+        top = wrapperHeight / 2 - height / 2;
+        shadow = "0 0 20px rgba(0,0,0,0.08)";
+      }
+
+      left += offsetX;
+      top += offsetY + -1;
+      this.$refs.drawer.style.top = "".concat(top, "px");
+      this.$refs.drawer.style.left = "".concat(left, "px");
+      this.$refs.drawer.style.boxShadow = shadow;
       this.drawerVisible = true;
     },
     closeDrawer: function closeDrawer() {
@@ -5501,6 +5554,17 @@ try {
 }
 
 
+/***/ }),
+
+/***/ "6ba0":
+/***/ (function(module, exports, __webpack_require__) {
+
+// 19.1.3.1 Object.assign(target, source)
+var $export = __webpack_require__("e99b");
+
+$export($export.S + $export.F, 'Object', { assign: __webpack_require__("9f15") });
+
+
 /***/ }),
 
 /***/ "6bf8":
@@ -5947,6 +6011,52 @@ module.exports = function (it) {
 };
 
 
+/***/ }),
+
+/***/ "9f15":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+// 19.1.2.1 Object.assign(target, source, ...)
+var DESCRIPTORS = __webpack_require__("26df");
+var getKeys = __webpack_require__("93ca");
+var gOPS = __webpack_require__("0c29");
+var pIE = __webpack_require__("35d4");
+var toObject = __webpack_require__("8078");
+var IObject = __webpack_require__("1b96");
+var $assign = Object.assign;
+
+// should work with symbols and should have deterministic property order (V8 bug)
+module.exports = !$assign || __webpack_require__("0926")(function () {
+  var A = {};
+  var B = {};
+  // eslint-disable-next-line no-undef
+  var S = Symbol();
+  var K = 'abcdefghijklmnopqrst';
+  A[S] = 7;
+  K.split('').forEach(function (k) { B[k] = k; });
+  return $assign({}, A)[S] != 7 || Object.keys($assign({}, B)).join('') != K;
+}) ? function assign(target, source) { // eslint-disable-line no-unused-vars
+  var T = toObject(target);
+  var aLen = arguments.length;
+  var index = 1;
+  var getSymbols = gOPS.f;
+  var isEnum = pIE.f;
+  while (aLen > index) {
+    var S = IObject(arguments[index++]);
+    var keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S);
+    var length = keys.length;
+    var j = 0;
+    var key;
+    while (length > j) {
+      key = keys[j++];
+      if (!DESCRIPTORS || isEnum.call(S, key)) T[key] = S[key];
+    }
+  } return T;
+} : $assign;
+
+
 /***/ }),
 
 /***/ "a450":

examples/App.vue

@@ -383,6 +383,51 @@
       </tr>
     </table>
 
+    <div class="title">抽屉配置 DrawerOption</div>
+    <table class="table">
+      <tr class="table-head">
+        <th>名称</th>
+        <th>说明</th>
+        <th>类型</th>
+        <th>示例</th>
+      </tr>
+      <tr>
+        <td width="150">width</td>
+        <td width="350">宽度，可以设置百分比</td>
+        <td width="150">String | Number</td>
+        <td width="100">-</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td width="150">height</td>
+        <td width="350">高度，可以设置百分比</td>
+        <td width="150">String | Number</td>
+        <td width="100">-</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td width="150">offsetX</td>
+        <td width="350">X偏移值，可以设置百分比</td>
+        <td width="150">String | Number</td>
+        <td width="100">-</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td width="150">offsetY</td>
+        <td width="350">Y偏移值，可以设置百分比</td>
+        <td width="150">String | Number</td>
+        <td width="100">-</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td width="150">position</td>
+        <td width="350">位置</td>
+        <td width="150">right | rightInside | center</td>
+        <td width="100">-</td>
+        <td></td>
+      </tr>
+    </table>
+
     <div class="title">组件属性</div>
     <table class="table">
       <tr class="table-head">
@@ -656,7 +701,7 @@
       <tr>
         <td>changeDrawer</td>
         <td>切换右侧抽屉显示/隐藏，vnode 为抽屉内容</td>
-        <td>Function(vnode)</td>
+        <td>Function(DrawerOption)</td>
         <td>-</td>
         <td></td>
       </tr>
@@ -1799,22 +1844,31 @@ export default {
       });
     },
     changeDrawer(contact, instance) {
-      instance.changeDrawer(() => {
-        return (
-          <div class="drawer-content">
-            <p>
-              <b>自定义抽屉</b>
-            </p>
-            <p>{contact.displayName}</p>
-          </div>
-        );
+      instance.changeDrawer({
+        //width: 240,
+        //height: "90%",
+        //offsetX:0 ,
+        //offsetY: ,
+        //position: "center",
+        // inside: true,
+        // offsetX: -280,
+        // offsetY: -100,
+        render: () => {
+          return (
+            <div class="drawer-content">
+              <p>
+                <b>自定义抽屉</b>
+              </p>
+              <p>{contact.displayName}</p>
+            </div>
+          );
+        }
       });
     },
     handleChangeContact(contact, instance) {
       console.log("Event:change-contact");
       instance.updateContact({
         id: contact.id,
-        //displayName: "123",
         unread: 0
       });
       instance.closeDrawer();
@@ -1960,9 +2014,11 @@ a
     font-weight normal
 .imui-center
   margin-bottom 60px
-  .lemon-wrapper,
-  .lemon-wrapper--drawer-show .lemon-drawer
-    box-shadow 0 0 30px rgba(0,0,0,0.1);
+  .lemon-wrapper
+    border:1px solid #ddd;
+  .lemon-drawer
+    border:1px solid #ddd;
+    border-left:0;
 .drawer-content
   padding 15px
 .more

examples/dist/index.html

@@ -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.e91d4c69.css rel=preload as=style><link href=js/chunk-vendors.2abee366.js rel=preload as=script><link href=js/index.6db35f89.js rel=preload as=script><link href=css/index.e91d4c69.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.2abee366.js></script><script src=js/index.6db35f89.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.4c3079e2.css rel=preload as=style><link href=js/chunk-vendors.2abee366.js rel=preload as=script><link href=js/index.eb3bbc56.js rel=preload as=script><link href=css/index.4c3079e2.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.2abee366.js></script><script src=js/index.eb3bbc56.js></script></body></html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemon-imui",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "main": "dist/index.umd.min.js",
   "description": "基于 VUE2.0 的 IM 聊天组件",
   "homepage": "http://june000.gitee.io/lemon-im/",

packages/components/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { useScopedSlot, funCall, generateUUID, cloneDeep } from "utils";
+import { useScopedSlot, funCall, generateUUID } from "utils";
 import { isFunction, isString, isEmpty } from "utils/validate";
 import contextmenu from "../directives/contextmenu";
 import {
@@ -13,6 +13,13 @@ import MemoryCache from "utils/cache/memory";
 
 const allMessages = {};
 const emojiMap = {};
+const toPx = val => {
+  return isString(val) ? val : `${val}px`;
+};
+const toPoint = str => {
+  return str.replace("%", "") / 100;
+};
+
 let renderDrawerContent = () => {};
 
 export default {
@@ -24,12 +31,12 @@ export default {
   },
   props: {
     width: {
-      type: String,
-      default: "850px"
+      type: [String, Number],
+      default: 850
     },
     height: {
-      type: String,
-      default: "580px"
+      type: [String, Number],
+      default: 580
     },
     theme: {
       type: String,
@@ -259,9 +266,10 @@ export default {
       return (
         <div
           style={{
-            width: this.width,
-            height: this.height
+            width: toPx(this.width),
+            height: toPx(this.height)
           }}
+          ref="wrapper"
           class={[
             "lemon-wrapper",
             `lemon-wrapper--theme-${this.theme}`,
@@ -420,7 +428,7 @@ export default {
     },
     _renderDrawer() {
       return this._menuIsMessages() && this.currentContactId ? (
-        <div class="lemon-drawer">
+        <div class="lemon-drawer" ref="drawer">
           {renderDrawerContent()}
           {useScopedSlot(this.$scopedSlots.drawer, "", this.currentContact)}
         </div>
@@ -462,13 +470,13 @@ export default {
           v-show={this._menuIsMessages() && defIsShow && curact.id}
         >
           <div class="lemon-container__title">
-            <div class="lemon-container__displayname">
-              {useScopedSlot(
-                this.$scopedSlots["message-title"],
-                curact.displayName,
-                curact
-              )}
-            </div>
+            {useScopedSlot(
+              this.$scopedSlots["message-title"],
+              <div class="lemon-container__displayname">
+                {curact.displayName}
+              </div>,
+              curact
+            )}
           </div>
           <lemon-messages
             ref="messages"
@@ -931,12 +939,52 @@ export default {
     getMessages(contactId) {
       return (contactId ? allMessages[contactId] : allMessages) || [];
     },
-    changeDrawer(render) {
+    changeDrawer(params) {
       this.drawerVisible = !this.drawerVisible;
-      if (this.drawerVisible == true) this.openDrawer(render);
+      if (this.drawerVisible == true) this.openDrawer(params);
     },
-    openDrawer(render) {
-      renderDrawerContent = render || new Function();
+    // openDrawer(data) {
+    //   renderDrawerContent = data || new Function();
+    //   this.drawerVisible = true;
+    // },
+    openDrawer(params) {
+      renderDrawerContent = isFunction(params)
+        ? params
+        : params.render || new Function();
+      const wrapperWidth = this.$refs.wrapper.clientWidth;
+      const wrapperHeight = this.$refs.wrapper.clientHeight;
+      let width = params.width || 200;
+      let height = params.height || wrapperHeight;
+      let offsetX = params.offsetX || 0;
+      let offsetY = params.offsetY || 0;
+      const position = params.position || "right";
+      if (isString(width)) width = wrapperWidth * toPoint(width);
+      if (isString(height)) height = wrapperHeight * toPoint(height);
+      if (isString(offsetX)) offsetX = wrapperWidth * toPoint(offsetX);
+      if (isString(offsetY)) offsetY = wrapperHeight * toPoint(offsetY);
+
+      this.$refs.drawer.style.width = `${width}px`;
+      this.$refs.drawer.style.height = `${height}px`;
+
+      let left = 0;
+      let top = 0;
+      let shadow = "";
+      if (position == "right") {
+        left = wrapperWidth;
+      } else if (position == "rightInside") {
+        left = wrapperWidth - width;
+        shadow = `-15px 0 16px -14px rgba(0,0,0,0.08)`;
+      } else if (position == "center") {
+        left = wrapperWidth / 2 - width / 2;
+        top = wrapperHeight / 2 - height / 2;
+        shadow = `0 0 20px rgba(0,0,0,0.08)`;
+      }
+      left += offsetX;
+      top += offsetY + -1;
+      this.$refs.drawer.style.top = `${top}px`;
+      this.$refs.drawer.style.left = `${left}px`;
+      this.$refs.drawer.style.boxShadow = shadow;
+
       this.drawerVisible = true;
     },
     closeDrawer() {
@@ -946,7 +994,6 @@ export default {
 };
 </script>
 <style lang="stylus">
-drawer-width = 200px
 bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
 @import '~styles/utils/index'
 
@@ -1033,18 +1080,15 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
 +b(lemon-drawer)
   position absolute
   top 0
-  right 0
   overflow hidden
-  background #f4f4f4
+  background #f6f6f6
   transition width .4s bezier
-  z-index 9
-  width drawer-width
-  height 100%
-  box-sizing border-box
+  z-index 11
+  display none
 +b(lemon-wrapper)
   +m(drawer-show)
     +b(lemon-drawer)
-      right -200px
+      display block
 +b(lemon-contact-info)
   flex-column()
   justify-content center
@@ -1097,7 +1141,7 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
   font-variant tabular-nums
   line-height 1.5
   color rgba(0, 0, 0, 0.65)
-  z-index 10
+  z-index 9999
   background-color #fff
   border-radius 6px
   box-shadow 0 2px 8px rgba(0, 0, 0, 0.06)