当前位置: 代码迷 >> 综合 >> [vant] 使用vant的checkbox到页面,发现点击没有反应
  详细解决方案

[vant] 使用vant的checkbox到页面,发现点击没有反应

热度:69   发布时间:2023-12-12 01:12:38.0

使用vant的checkbox到页面,发现点击没有反应,怎么排查这个问题?

step1

  • 搜索vant官方issue 和 搜索引擎 checkbox点击无效,没有人遇到
  • => 这个问题应该是自己使用姿势导致的

step2

  • vant官方组件页面:可以点击
  • 将checkbo放在当前白色卡片上:不可以点击
  • 将checkbo放在当前白色卡片下面:可以点击
  • =》 checkbox在当前白色卡片有问题

step3

  • 在有反应的checkbox上慢慢添加白色卡片结构和样式
  • 在最外层样式加上之后就无法点击了
  • =》最外层样式问题

step4

  • 逐行添加最外层样式
  • 发现是伪元素after加上之后出现无法点击问题
  • =>伪元素after样式导致
  • 想了下:可能是after这个absolute定位元素全覆盖当前元素导致的
  • 解决:将伪元素这层元素设置z-index到底层就可以了

image-20210801135611718

  相关解决方案