vue-ydui
vue-ydui copied to clipboard
Popup关闭后依然可以点击其中的Button,以及SendCode按钮
问题描述
如题
出现的情况
1、全量引入不会出现这个问题 2、按需引入有可能发生这个问题
##过程 最开始以为是手机端click事件点击穿透的问题,然后引入了tap事件,问题依然出现。 最后发现,在页面上竟然能直接点击已经关闭Popup组件中的按钮。
原因
因为Popup组件对.yd-btn定义了如下样式:
.yd-btn {
pointer-events: auto;
}
虽然Popup针对Button,有了对应的覆盖样式:
.yd-popup-center, .yd-popup-center * {
pointer-events: none;
}
但如果你是按需引入
这两个组件,并且没有在意它们引入的顺序,就会导致.yd-btn
的样式覆盖.yd-popup-center, .yd-popup-center *
的样式,从而导致Popup关闭了,其中的按钮依然可点的问题,如图:
解决方案
1、如果没有其他不得已的原因,认为作者可以移除.yd-btn中pointer-events: auto;
这句代码,减少复杂度,避免一些奇怪的问题(根本解决方案)
2、在Popup之前引入Button以及SendCode组件(临时解决方案)
相关的,可能也是这个原因的issue
#557 #433 #181