关于伪元素引发外层盒子点击事件失效

关键词：uni-app & vue3 & 伪元素 & 点击事件 & concent
在例子场景中，存在搜索框之后的清除图标以及之前的搜索图标，这些需求可以使用伪元素进行处理，例如下图

 

::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用

 如果使用此方法或者你接手的项目是这样的，那么会牵扯到一个问题，这些图标属于是虚拟dom，可能会导致外层盒子点击事件失效。

 此处给出一种解决方法：

使用button标签去嵌套住存在伪元素的标签

<button>
	<uni-icons color="#c0c4cc" size="20" type="clear" />
</button>

 

 当然直接使用button的话，样式布局可能不是大家需要的，这里还要搭配去button默认样式

button {
	margin: unset;
	padding: unset;
	background: transparent;
}
button:after {
	border: unset;
}