fix: 解决 uni.showLoading 显示的元素点击无法穿透的问题（mask 配置为 false 不生效）

jbasttdi · Jun 17, 2019 · 9565632 · 9565632
1 parent d71b094
commit 9565632
Showing 1 changed file with 79 additions and 76 deletions.
diff --git a/src/platforms/h5/components/app/popup/toast.vue b/src/platforms/h5/components/app/popup/toast.vue
@@ -7,25 +7,23 @@
         v-if="mask"
         class="uni-mask"
         style="background: transparent;"
-        @touchmove.prevent />
+        @touchmove.prevent/>
       <div
         v-if="!image&&!iconClass"
-        class="uni-sample-toast"
-        style="pointer-events: none;">
+        class="uni-sample-toast">
         <p class="uni-simple-toast__text">{{ title }}</p>
       </div>
       <div
         v-else
-        class="uni-toast"
-        style="pointer-events: none;">
+        class="uni-toast">
         <img
           v-if="image"
           :src="image"
           class="uni-toast__icon">
         <i
           v-else
           :class="iconClass"
-          class="uni-icon_toast" />
+          class="uni-icon_toast"/>
         <p class="uni-toast__content">{{ title }}</p>
       </div>
     </uni-toast>
@@ -85,82 +83,87 @@ export default {
 }
 </script>
 <style>
-	uni-toast {
-    position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		z-index: 999;
-		display: block;
-		box-sizing: border-box;
-	}
+uni-toast {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  display: block;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+uni-toast .uni-sample-toast {
+  position: fixed;
+  z-index: 999;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  max-width: 80%;
+}
 
-	uni-toast .uni-sample-toast {
-		position: fixed;
-		z-index: 999;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		text-align: center;
-		max-width: 80%;
-	}
+uni-toast .uni-simple-toast__text {
+  display: inline-block;
+  vertical-align: middle;
+  color: #ffffff;
+  background-color: rgba(17, 17, 17, 0.7);
+  padding: 10px 20px;
+  border-radius: 5px;
+  font-size: 13px;
+  text-align: center;
+  max-width: 100%;
+  word-break: break-all;
+  white-space: normal;
+}
 
-	uni-toast .uni-simple-toast__text {
-		display: inline-block;
-		vertical-align: middle;
-		color: #ffffff;
-		background-color: rgba(17, 17, 17, 0.7);
-		padding: 10px 20px;
-		border-radius: 5px;
-		font-size: 13px;
-		text-align: center;
-		max-width: 100%;
-		word-break: break-all;
-		white-space: normal;
-	}
+uni-toast .uni-mask {
+  pointer-events: auto;
+}
 
-	uni-toast .uni-toast {
-		position: fixed;
-		z-index: 999;
-		width: 8em;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		background: rgba(17, 17, 17, 0.7);
-		text-align: center;
-		border-radius: 5px;
-		color: #ffffff;
-	}
+uni-toast .uni-toast {
+  position: fixed;
+  z-index: 999;
+  width: 8em;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(17, 17, 17, 0.7);
+  text-align: center;
+  border-radius: 5px;
+  color: #ffffff;
+}
 
-	uni-toast .uni-toast * {
-		box-sizing: border-box;
-	}
+uni-toast .uni-toast * {
+  box-sizing: border-box;
+}
 
-	uni-toast .uni-toast__icon {
-		margin: 20px 0 0;
-		width: 38px;
-		height: 38px;
-		vertical-align: baseline;
-	}
+uni-toast .uni-toast__icon {
+  margin: 20px 0 0;
+  width: 38px;
+  height: 38px;
+  vertical-align: baseline;
+}
 
-	uni-toast .uni-icon_toast {
-		margin: 15px 0 0
-	}
+uni-toast .uni-icon_toast {
+  margin: 15px 0 0;
+}
 
-	uni-toast .uni-icon_toast.uni-icon-success-no-circle:before {
-		color: #ffffff;
-		font-size: 55px;
-	}
+uni-toast .uni-icon_toast.uni-icon-success-no-circle:before {
+  color: #ffffff;
+  font-size: 55px;
+}
 
-	uni-toast .uni-icon_toast.uni-loading {
-		margin: 20px 0 0;
-		width: 38px;
-		height: 38px;
-		vertical-align: baseline;
-	}
+uni-toast .uni-icon_toast.uni-loading {
+  margin: 20px 0 0;
+  width: 38px;
+  height: 38px;
+  vertical-align: baseline;
+}
 
-	uni-toast .uni-toast__content {
-		margin: 0 0 15px;
-	}
-</style>
+uni-toast .uni-toast__content {
+  margin: 0 0 15px;
+}
+</style>