使用vant的checkbox到页面,发现点击没有反应,怎么排查这个问题?
step1
- 搜索vant官方issue 和 搜索引擎 checkbox点击无效,没有人遇到
- => 这个问题应该是自己使用姿势导致的
step2
- vant官方组件页面:可以点击
- 将checkbo放在当前白色卡片上:不可以点击
- 将checkbo放在当前白色卡片下面:可以点击
- =》 checkbox在当前白色卡片有问题
step3
- 在有反应的checkbox上慢慢添加白色卡片结构和样式
- 在最外层样式加上之后就无法点击了
- =》最外层样式问题
step4
- 逐行添加最外层样式
- 发现是伪元素after加上之后出现无法点击问题
- =>伪元素after样式导致
- 想了下:可能是after这个absolute定位元素全覆盖当前元素导致的
- 解决:将伪元素这层元素设置z-index到底层就可以了