[bugfix] Toast: overlay blocked by other element (#740)

packages/toast/index.js

@@ -6,10 +6,11 @@ const defaultOptions = {
   type: 'text',
   mask: false,
   message: '',
-  visible: true,
+  value: true,
   duration: 3000,
   position: 'middle',
-  forbidClick: false
+  forbidClick: false,
+  overlayStyle: {}
 };
 const parseOptions = message => isObj(message) ? message : { message };
 
@@ -28,6 +29,16 @@ function createInstance() {
   return queue[queue.length - 1];
 };
 
+// transform toast options to popup props
+function transformer(options) {
+  options.overlay = options.mask;
+  if (options.forbidClick && !options.overlay) {
+    options.overlay = true;
+    options.overlayStyle = { background: 'transparent' };
+  }
+  return options;
+}
+
 function Toast(options = {}) {
   const toast = createInstance();
 
@@ -35,11 +46,11 @@ function Toast(options = {}) {
     ...currentOptions,
     ...parseOptions(options),
     clear() {
-      toast.visible = false;
+      toast.value = false;
     }
   };
 
-  Object.assign(toast, options);
+  Object.assign(toast, transformer(options));
   clearTimeout(toast.timer);
 
   if (options.duration > 0) {

packages/toast/toast.vue

@@ -1,35 +1,33 @@
 <template>
   <transition name="van-fade">
-    <div class="van-toast-wrapper" v-show="visible">
-      <div class="van-toast" :class="[`van-toast--${displayStyle}`, `van-toast--${position}`]">
-        <!-- text only -->
-        <div v-if="displayStyle === 'text'">{{ message }}</div>
-        <div v-if="displayStyle === 'html'" v-html="message" />
+    <div class="van-toast" :class="[`van-toast--${displayStyle}`, `van-toast--${position}`]" v-show="value">
+      <!-- text only -->
+      <div v-if="displayStyle === 'text'">{{ message }}</div>
+      <div v-if="displayStyle === 'html'" v-html="message" />
 
-        <!-- with icon -->
-        <template v-if="displayStyle === 'default'">
-          <loading v-if="type === 'loading'" color="white" />
-          <icon v-else class="van-toast__icon" :name="type" />
-          <div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
-        </template>
-      </div>
-      <div class="van-toast__overlay" :class="{ 'van-toast__overlay--mask': mask }" v-if="forbidClick || mask" />
+      <!-- with icon -->
+      <template v-if="displayStyle === 'default'">
+        <loading v-if="type === 'loading'" color="white" />
+        <icon v-else class="van-toast__icon" :name="type" />
+        <div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
+      </template>
     </div>
   </transition>
 </template>
 
 <script>
 import create from '../utils/create';
+import Popup from '../mixins/popup';
 
 const STYLE_LIST = ['success', 'fail', 'loading'];
 
 export default create({
   name: 'toast',
 
+  mixins: [Popup],
+
   props: {
-    mask: Boolean,
     message: [String, Number],
-    forbidClick: Boolean,
     type: {
       type: String,
       default: 'text'
@@ -37,15 +35,13 @@ export default create({
     position: {
       type: String,
       default: 'middle'
+    },
+    lockScroll: {
+      type: Boolean,
+      default: false
     }
   },
 
-  data() {
-    return {
-      visible: false
-    };
-  },
-
   computed: {
     displayStyle() {
       return STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type;