Merge pull request #17 from dreambo8563/develop

fix(nest mask): fix css issue
dreambo8563 · Apr 19, 2019 · 4418b0d · 4418b0d
2 parents 2d380ec + eb36e06
commit 4418b0d
Show file tree

Hide file tree

Showing 16 changed files with 104 additions and 39 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+<a name="1.0.4"></a>
+## [1.0.4](https://github.com/dreambo8563/vue-simple-drawer/compare/v1.0.2...v1.0.4) (2019-04-19)
+
+
+### Bug Fixes
+
+* **nest mask:** fix css issue ([2f9ede4](https://github.com/dreambo8563/vue-simple-drawer/commit/2f9ede4))
+
+
+
 <a name="1.0.2"></a>
 ## [1.0.2](https://github.com/dreambo8563/vue-simple-drawer/compare/v1.0.1...v1.0.2) (2019-04-18)
 

diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,10 @@
 module.exports = {
-  presets: ["@vue/app"]
+  presets: [
+    [
+      "@vue/app",
+      {
+        useBuiltIns: false
+      }
+    ]
+  ]
 };
diff --git a/docs/index.html b/docs/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"><link rel=icon href=/vue-simple-drawer/favicon.ico><title>vue-simple-drawer</title><link href=/vue-simple-drawer/js/app.a53f6ab0.js rel=preload as=script><link href=/vue-simple-drawer/js/chunk-vendors.c6e5b2fc.js rel=preload as=script></head><body><noscript><strong>We're sorry but vue-simple-drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-simple-drawer/js/chunk-vendors.c6e5b2fc.js></script><script src=/vue-simple-drawer/js/app.a53f6ab0.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"><link rel=icon href=/vue-simple-drawer/favicon.ico><title>vue-simple-drawer</title><link href=/vue-simple-drawer/js/app.f2ca7d00.js rel=preload as=script><link href=/vue-simple-drawer/js/chunk-vendors.0387dd60.js rel=preload as=script></head><body><noscript><strong>We're sorry but vue-simple-drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-simple-drawer/js/chunk-vendors.0387dd60.js></script><script src=/vue-simple-drawer/js/app.f2ca7d00.js></script></body></html>
diff --git a/docs/js/app.a53f6ab0.js b/docs/js/app.a53f6ab0.js
diff --git a/docs/js/app.a53f6ab0.js.map b/docs/js/app.a53f6ab0.js.map
diff --git a/docs/js/app.f2ca7d00.js b/docs/js/app.f2ca7d00.js
diff --git a/docs/js/app.f2ca7d00.js.map b/docs/js/app.f2ca7d00.js.map
diff --git a/docs/js/chunk-vendors.0387dd60.js b/docs/js/chunk-vendors.0387dd60.js
diff --git a/docs/js/chunk-vendors.0387dd60.js.map b/docs/js/chunk-vendors.0387dd60.js.map
diff --git a/docs/js/chunk-vendors.c6e5b2fc.js b/docs/js/chunk-vendors.c6e5b2fc.js
diff --git a/docs/js/chunk-vendors.c6e5b2fc.js.map b/docs/js/chunk-vendors.c6e5b2fc.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-simple-drawer",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "author": "dreambo8563",
   "main": "dist/vue-simple-drawer.umd.min.js",
   "private": false,

diff --git a/src/App.vue b/src/App.vue
@@ -23,16 +23,25 @@
     </div>
 
     <button @click="toggle">Open/Close</button>
-    <Drawer @close="toggle" :align="align" :closeable="true">
+    <Drawer
+      :maskClosable="true"
+      :index="1002"
+      @close="toggle"
+      :align="align"
+      :closeable="true"
+    >
       <div v-if="open">
-        <span @click="innerOpen = true">
+        <span @click="clickContent">
           content here content here content here content here content here
           content here content here
         </span>
-        <Drawer @close="innerOpen = false" :align="align" :closeable="true">
-          <div v-if="innerOpen">
-            content here content here content here
-          </div>
+        <Drawer
+          :maskClosable="true"
+          @close="innerOpen = false"
+          :align="align"
+          :closeable="true"
+        >
+          <div v-if="innerOpen">content here content here content here</div>
         </Drawer>
       </div>
     </Drawer>
@@ -57,6 +66,9 @@ export default {
   methods: {
     toggle() {
       this.open = !this.open;
+    },
+    clickContent() {
+      this.innerOpen = true;
     }
   },
   watch: {

diff --git a/src/_index.scss b/src/_index.scss
@@ -10,7 +10,7 @@
   position: fixed;
   overflow: auto;
   // top: 0;
-  z-index: 99;
+  // z-index: 99;
   // bottom: 0;
 
   &.closeable {
@@ -49,7 +49,7 @@
     position: absolute;
     right: 0;
     top: 20px;
-    z-index: 100;
+    // z-index: 100;
     transform: translate(-50%, -50%);
     color: currentColor;
     font-size: 20px;
@@ -92,15 +92,22 @@
   }
 }
 .mask {
-  &::before {
-    content: "";
-    position: absolute;
-    background: grey;
-    opacity: 0.5;
-    width: 100%;
-    left: 0;
-    top: 0;
-    height: 100%;
-    z-index: 98;
-  }
+  position: fixed;
+  background: grey;
+  opacity: 0.5;
+  width: 100%;
+  left: 0;
+  top: 0;
+  height: 100%;
+  // &::before {
+  //   content: "";
+  //   position: absolute;
+  //   background: grey;
+  //   opacity: 0.5;
+  //   width: 100%;
+  //   left: 0;
+  //   top: 0;
+  //   height: 100%;
+  //   // z-index: 98;
+  // }
 }
diff --git a/src/index.vue b/src/index.vue
@@ -1,5 +1,13 @@
 <template>
   <div>
+    <transition name="fade" mode="out-in">
+      <div
+        :style="indexCls()"
+        @click="onMask"
+        v-if="$slots.default"
+        :class="{ mask }"
+      ></div>
+    </transition>
     <transition
       :enter-active-class="alignInCls"
       :leave-active-class="alignOutCls"
@@ -9,17 +17,15 @@
         :class="{ closeable, [align.toLowerCase()]: true }"
         v-if="$slots.default"
         class="vue-simple-drawer cover"
+        :style="indexCls()"
       >
-        <div @click="close" v-if="closeable" class="close-btn">
+        <div @click.stop="close" v-if="closeable" class="close-btn">
           <div class="leftright"></div>
           <div class="rightleft"></div>
         </div>
         <slot></slot>
       </div>
     </transition>
-    <transition name="fade" mode="out-in">
-      <div @click="onMask" v-if="$slots.default" :class="{ mask }"></div>
-    </transition>
   </div>
 </template>
 <script>
@@ -44,8 +50,23 @@ export default {
     maskClosable: {
       type: Boolean,
       default: false
+    },
+    index: {
+      type: Number,
+      default() {
+        return this.simpleDrawerIndex;
+      }
     }
   },
+  provide() {
+    return {
+      simpleDrawerIndex: this.zIndex + 1
+    };
+  },
+  inject: {
+    simpleDrawerIndex: { default: 1000 }
+  },
+
   methods: {
     close() {
       this.$emit("close");
@@ -54,6 +75,11 @@ export default {
       if (this.maskClosable) {
         this.close();
       }
+    },
+    indexCls(offset = 0) {
+      return {
+        zIndex: this.zIndex + offset
+      };
     }
   },
   computed: {
@@ -65,6 +91,9 @@ export default {
     },
     alighCloseCls() {
       return `close-${this.align.toLowerCase()}`;
+    },
+    zIndex() {
+      return this.index || this.simpleDrawerIndex;
     }
   }
 };
Original file line number	Diff line number	Diff line change
		@@ -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"><link rel=icon href=/vue-simple-drawer/favicon.ico><title>vue-simple-drawer</title><link href=/vue-simple-drawer/js/app.a53f6ab0.js rel=preload as=script><link href=/vue-simple-drawer/js/chunk-vendors.c6e5b2fc.js rel=preload as=script></head><body><noscript><strong>We're sorry but vue-simple-drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-simple-drawer/js/chunk-vendors.c6e5b2fc.js></script><script src=/vue-simple-drawer/js/app.a53f6ab0.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"><link rel=icon href=/vue-simple-drawer/favicon.ico><title>vue-simple-drawer</title><link href=/vue-simple-drawer/js/app.f2ca7d00.js rel=preload as=script><link href=/vue-simple-drawer/js/chunk-vendors.0387dd60.js rel=preload as=script></head><body><noscript><strong>We're sorry but vue-simple-drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-simple-drawer/js/chunk-vendors.0387dd60.js></script><script src=/vue-simple-drawer/js/app.f2ca7d00.js></script></body></html>