[improvement] Toast: add z-index prop (#571)

dist/toast/index.js

@@ -6,6 +6,10 @@ create({
     mask: Boolean,
     message: String,
     forbidClick: Boolean,
+    zIndex: {
+      type: Number,
+      value: 1000
+    },
     type: {
       type: String,
       value: 'text'

dist/toast/index.wxml

@@ -1,10 +1,11 @@
 <van-overlay
   show="{{ show && (mask || forbidClick) }}"
   mask="{{ mask }}"
-  z-index="3000"
+  z-index="{{ zIndex }}"
 />
 <van-transition
   show="{{ show }}"
+  custom-style="z-index: {{ zIndex }}"
   custom-class="van-toast__container"
 >
   <view class="van-toast van-toast--{{ type === 'text' ? 'text' : 'icon' }} van-toast--{{ position }}">

dist/toast/index.wxss

@@ -1 +1 @@
-.van-toast{display:-webkit-box;display:-webkit-flex;display:flex;color:#fff;font-size:12px;line-height:1.2;border-radius:5px;word-break:break-all;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;box-sizing:border-box;background-color:rgba(0,0,0,.7)}.van-toast__container{top:50%;left:50%;z-index:3001;position:fixed;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-toast--text{padding:12px;min-width:220px}.van-toast--icon{width:120px;min-height:120px;padding:15px}.van-toast--icon .van-toast__icon{height:1em;font-size:50px}.van-toast--icon .van-toast__text{font-size:14px;padding-top:10px}.van-toast__loading{margin:10px 0 5px}.van-toast--top{-webkit-transform:translate(0,-30vh);transform:translate(0,-30vh)}.van-toast--bottom{-webkit-transform:translate(0,30vh);transform:translate(0,30vh)}
+.van-toast{display:-webkit-box;display:-webkit-flex;display:flex;color:#fff;font-size:12px;line-height:1.2;border-radius:5px;word-break:break-all;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;box-sizing:border-box;background-color:rgba(0,0,0,.7)}.van-toast__container{top:50%;left:50%;position:fixed;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-toast--text{padding:12px;min-width:220px}.van-toast--icon{width:120px;min-height:120px;padding:15px}.van-toast--icon .van-toast__icon{height:1em;font-size:50px}.van-toast--icon .van-toast__text{font-size:14px;padding-top:10px}.van-toast__loading{margin:10px 0 5px}.van-toast--top{-webkit-transform:translate(0,-30vh);transform:translate(0,-30vh)}.van-toast--bottom{-webkit-transform:translate(0,30vh);transform:translate(0,30vh)}

dist/toast/toast.js

@@ -5,6 +5,7 @@ const defaultOptions = {
   mask: false,
   message: '',
   show: true,
+  zIndex: 1000,
   duration: 3000,
   position: 'middle',
   forbidClick: false,

packages/toast/README.md

@@ -92,5 +92,6 @@ const timer = setInterval(() => {
 | mask | 是否显示背景蒙层 | `Boolean` | `false` |
 | forbidClick | 是否禁止背景点击 | `Boolean` | `false` |
 | loadingType | 加载图标类型, 可选值为 `spinner` | `String` | `circular` |
+| zIndex | z-index 层级 | `Number` | `1000` |
 | duration | 展示时长(ms)，值为 0 时，toast 不会消失 | `Number` | `3000` |
 | selector | 自定义选择器 | `String` | `van-toast` |

packages/toast/index.js

@@ -6,6 +6,10 @@ create({
     mask: Boolean,
     message: String,
     forbidClick: Boolean,
+    zIndex: {
+      type: Number,
+      value: 1000
+    },
     type: {
       type: String,
       value: 'text'

packages/toast/index.pcss

@@ -16,7 +16,6 @@
   &__container {
     top: 50%;
     left: 50%;
-    z-index: 3001;
     position: fixed;
     transform: translate(-50%, -50%);
   }

packages/toast/index.wxml

@@ -1,10 +1,11 @@
 <van-overlay
   show="{{ show && (mask || forbidClick) }}"
   mask="{{ mask }}"
-  z-index="3000"
+  z-index="{{ zIndex }}"
 />
 <van-transition
   show="{{ show }}"
+  custom-style="z-index: {{ zIndex }}"
   custom-class="van-toast__container"
 >
   <view class="van-toast van-toast--{{ type === 'text' ? 'text' : 'icon' }} van-toast--{{ position }}">

packages/toast/toast.js

@@ -5,6 +5,7 @@ const defaultOptions = {
   mask: false,
   message: '',
   show: true,
+  zIndex: 1000,
   duration: 3000,
   position: 'middle',
   forbidClick: false,