Commit 3dcec9f3 authored by 费陶勇's avatar 费陶勇

fix: 修复toast组件在隐藏并降低zIndex过程中会出现被高zIndex组件遮挡的bug

1.从样式中删除了原本show状态添加的固定zIndex(好像代码冗余了)
2.添加css样式事件穿透,防止组件隐藏的时候zIndex过高导致点击事件被遮挡
3.切换组件状态时动态切换padding样式,在hide状态时组件的宽度突然缩小造成视觉效果不适
parent 8cf223df
<template> <template>
<view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + config.type, 'u-position-' + config.position]" :style="{ <view class="u-toast" :class="[isShow ? 'u-show' : '', 'u-type-' + config.type, 'u-position-' + config.position]" :style="{
padding: isShow ? '0 40rpx' : 0,
zIndex: uZIndex zIndex: uZIndex
}"> }">
<view class="u-icon-wrap"> <view class="u-icon-wrap">
...@@ -54,7 +53,7 @@ ...@@ -54,7 +53,7 @@
}, },
uZIndex() { uZIndex() {
// 显示toast时候,如果用户有传递z-index值,有限使用 // 显示toast时候,如果用户有传递z-index值,有限使用
return this.isShow ? (this.zIndex ? this.zIndex : this.$u.zIndex.toast) : '-1'; return this.isShow ? (this.zIndex ? this.zIndex : this.$u.zIndex.toast) : '999999';
} }
}, },
methods: { methods: {
...@@ -136,11 +135,12 @@ ...@@ -136,11 +135,12 @@
justify-content: center; justify-content: center;
font-size: 28rpx; font-size: 28rpx;
opacity: 0; opacity: 0;
pointer-events: none;
padding:0 40rpx;
} }
.u-toast.u-show { .u-toast.u-show {
opacity: 1; opacity: 1;
z-index: 9999999;
} }
.u-text { .u-text {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment