文章目录

背景问题分析解决思路一:会不会是由于在选择框内hover的时候出现的那个图标导致的解决思路二:会不会是这个span禁止复制解决思路三:去看看antd具体实现

最终解决方案其他版本的解决方案antd3.*antd5.*

背景

在React项目开发中,我们经常会用到antd内的Select组件。有时候我们会在disabled状态使用Select。这个时候我们偶尔会想要复制到Select内的这个输入框里面的内容。但是会发现无法复制。 我这边使用的是antd4

问题分析

出现了无法复制的情况,那么我们就要进行问题的分析 首先,通过打开控制台的方式,来看这个Select的Dom是怎么样的

我们通过控制台可以看到,antd的Select实现并非传统的使用原生select来改动,而是自己通过div和span通过代码组合来组装成的组件。

解决思路一:会不会是由于在选择框内hover的时候出现的那个图标导致的

于是,就直接在element内改动样式,去掉这个玩意 众所周知,一般这种图标,鼠标置于某处,鼠标的样式是由cursor这个东西决定的

去掉之后,果然还是不行

解决思路二:会不会是这个span禁止复制

从我们所学到的知识来看,禁止一个span被复制,我们可以使用css来处理,也就是在 这个span上加上一段css

不可以被复制的文字

这一段代码加上,就会让span无法被复制

一看,果然有。但是去掉之后,还是不行

但是去掉之后还是不行,心碎思密达

解决思路三:去看看antd具体实现

遇事不决,去看源码 一顿框框的看之后,意识到了问题的所在,我们想要复制的是span的内容,但是在他的上层有一层div,我们关于的鼠标事件就被div遮盖了。所以,我们需要将鼠标事件,穿透到span上触发。

最终解决方案

pointer-events:none 的作用: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止JavaScript点击动作触发的事件

mdn的解释的再解释:(中翻中了属于是) pointer-events:none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto(默认值),鼠标还是会监听这个子元素的。

更通俗的说法是,pointer-events:none作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素,则我们在页面上看到的这个按钮,只是一个虚幻的影子而已,您可以理解为海市蜃楼,幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。一切都是幻影!

只需要在Select使用处,加上样式 pointer-events:none。然后重写这个antd的样式即可解决这个问题。

其他版本的解决方案

antd3.*

这个版本直接用div套div的方式 还是同理,修改这两处即可。

antd5.*

文章链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: