修改drawer z-index

2021-01-23 14:59:36 +08:00
parent 2126095bdb
commit d1ee8af039
8 changed files with 18 additions and 9 deletions
@@ -22,6 +22,10 @@
        @menu-avatar-click="handleMenuAvatarClick"
        @send="handleSend"
      >
+        <template #message-title="contact">
+          <span>{{ contact.displayName }}</span>
+          <small class="more" @click="changeDrawer(contact,$refs.IMUI)">{{($refs.IMUI ? $refs.IMUI.drawerVisible : false) ? '关闭' : '打开'}}抽屉</small>
+        </template>
      </lemon-imui>
      <a target="_blank" style="font-size:14px" href="https://codesandbox.io/s/sweet-chaplygin-s24mb?fontsize=14&hidenavigation=1&theme=dark">在线编辑代码</a>
      <div class="action">
@@ -48,6 +52,7 @@
    <div class="imui-center">
      <lemon-imui
        :user="user"
+        class="lemon-slot"
        ref="SlotIMUI"
        @pull-messages="handlePullMessages"
        @message-click="handleMessageClick"
@@ -62,7 +67,7 @@
        </template>
        <template #message-title="contact">
          <span>{{ contact.displayName }}</span>
-          <small class="more" @click="changeDrawer(contact)">{{($refs.SlotIMUI ? $refs.SlotIMUI.drawerVisible : false) ? '关闭' : '打开'}}抽屉</small>
+          <small class="more" @click="changeDrawer(contact,$refs.SlotIMUI)">{{($refs.SlotIMUI ? $refs.SlotIMUI.drawerVisible : false) ? '关闭' : '打开'}}抽屉</small>
        </template>
        <template #contact-info="contact">
          自定义联系人信息 {{ contact.displayName }}
@@ -93,6 +98,7 @@
    <div class="title">精简模式</div>
    <div class="imui-center">
      <lemon-imui
+        class="lemon-simple"
        :user="user"
        ref="SimpleIMUI"
        width="340px"
@@ -1295,8 +1301,8 @@ export default {
        lastContent: "修改昵称为随机字母"
      });
    },
-    changeDrawer(contact) {
-      this.$refs.SlotIMUI.changeDrawer(() => {
+    changeDrawer(contact,instance) {
+      instance.changeDrawer(() => {
        return (
          <div class="drawer-content">
            <p>
@@ -1504,4 +1510,7 @@ pre
  background #fff
  border-radius 8px
  padding 15px
+.lemon-simple .lemon-container{
+  z-index:5
+}
 </style>
@@ -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.81b5b60d.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.9c1e9610.js rel=preload as=script><link href=css/index.81b5b60d.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.9c1e9610.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.5cd0b902.css rel=preload as=style><link href=js/chunk-vendors.e4810482.js rel=preload as=script><link href=js/index.23971885.js rel=preload as=script><link href=css/index.5cd0b902.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.23971885.js></script></body></html>
@@ -1,6 +1,6 @@
 {
  "name": "lemon-imui",
-  "version": "1.2.0",
+  "version": "1.2.1",
  "main": "dist/index.umd.min.js",
  "description": "基于 VUE2.0 的 IM 聊天组件",
  "homepage": "https://github.com/fanjyy/lemon-imui",
@@ -876,7 +876,7 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
  background #f4f4f4
  word-break()
  position relative
-  z-index 2
+  z-index 10
  +e(title)
    padding 15px 15px
  +e(displayname)
@@ -891,7 +891,7 @@ bezier = cubic-bezier(0.645, 0.045, 0.355, 1)
  overflow hidden
  background #f4f4f4
  transition width .4s bezier
-  z-index 1
+  z-index 9
  width drawer-width
  height 100%
  box-sizing border-box