[Improvement] add overlay component (#442)

packages/overlay/index.js

@@ -1,11 +1,17 @@
 Component({
   properties: {
-    show: Boolean
+    show: Boolean,
+    mask: Boolean,
+    customStyle: String,
+    zIndex: {
+      type: Number,
+      value: 1
+    }
   },
 
   methods: {
-    onClickOverlay() {
-
+    onClick() {
+      this.triggerEvent('click');
     }
   }
 });

packages/overlay/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-transition": "../transition/index"
+  }
 }

packages/overlay/index.pcss

@@ -0,0 +1,7 @@
+.van-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

packages/overlay/index.wxml

@@ -1,5 +1,6 @@
-<view
-  class="overlay-class van-popup__overlay {{ show ? 'van-popup--show' : '' }}"
-  style="{{ overlayStyle }}"
-  bind:tap="onClickOverlay"
+<van-transition
+  show="{{ show }}"
+  custom-class="van-overlay"
+  custom-style="z-index: {{ zIndex }}; {{ mask ? 'background-color: rgba(0, 0, 0, .7);' : '' }}; {{ customStyle }}"
+  bind:tap="onClick"
 />

packages/toast/index.json

@@ -3,6 +3,7 @@
   "usingComponents": {
     "van-icon": "../icon/index",
     "van-loading": "../loading/index",
+    "van-overlay": "../overlay/index",
     "van-transition": "../transition/index"
   }
 }

packages/toast/index.pcss

@@ -21,15 +21,6 @@
     transform: translate(-50%, -50%);
   }
 
-  &__overlay {
-    z-index: 3000;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
   &--text {
     padding: 12px;
     min-width: 220px;

packages/toast/index.wxml

@@ -1,7 +1,7 @@
-<van-transition
+<van-overlay
   show="{{ show && (mask || forbidClick) }}"
-  custom-class="van-toast__overlay"
-  custom-style="{{ mask ? 'background-color: rgba(0, 0, 0, .7);' : '' }}"
+  mask="{{ mask }}"
+  z-index="3000"
 />
 <van-transition
   show="{{ show }}"