拟解决问题:
给a标签添加disabled属性后,效果置灰不可点击,但鼠标放上去是箭头
。
期望:鼠标放上去显示红色禁用符号
。
<a :disabled="true">删除</a>
效果:
在控制台查看元素:
发现给a标签disabled属性添加上了鼠标禁用样式
cursor:not-allowed和鼠标禁用事件
pointer-event:none,但禁用样式不生效。
样式不生效的原因是:这两者同时使用时,元素永远不会成为鼠标事件的target。
解决方案:
在a标签外层包裹一个span,在span上添加样式
。a标签的鼠标禁用事件依旧生效。保证了样式和事件同时生效。
<span style="cursor: not-allowed">
<a :disabled="true">删除</a>
</span>
效果: