swiper中解决文字不能复制

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper中解决文字不能复制相关的知识,希望对你有一定的参考价值。

有同事想复制公司网站上的文字信息,电话、邮箱之类的,如下图:

swiper中解决文字不能复制_swiper

因为当时用的swiper.js写的一些模块动画,鼠标选中操作时整块页面会滑走,无法选中文字信息进行复制,让我处理一下,方便复制其中的邮箱、电话等文字内容。

我复现了下,发现应该是和触摸功能块冲突,导致无法复制。

查了下api文档[1],api文档中给出的参数中,有一个noSwiping参数。

swiper中解决文字不能复制_文字不能复制_02

其中说明了“希望文字被选中时可以考虑使用”。

而在使用时,直接在你想复制的文字段直接增加类名swiper-no-swiping

代码示例:

<div class="swiper-slide">
<p class="swiper-no-swiping">想复制的文字内容</p>
</div>

这样文字就可以被鼠标选中,可以复制了,而且不影响slide的拖动效果。

如果想使slide无法拖动,也可以直接在slide上增加类名swiper-no-swiping

代码示例:

<div class="swiper-slide swiper-no-swiping">
<p>此slide将无法拖动</p>
</div>

这样此slide块鼠标就无法拖动,slide中的文字也可以被选中复制。

当然还要记得设置 noSwiping: ture,使类名‘swiper-no-swiping’生效。

完整代码:

<div class="swiper">
<div class="swiper-wrapper">

<!-- slide可以拖动,仅复制文字内容 -->
<div class="swiper-slide">
<p class="swiper-no-swiping">想复制的文字内容</p> <!-- 给元素增加swiper-no-swiping类 -->
</div>

<!-- slide不可以拖动,可以复制文字内容 -->
<div class="swiper-slide swiper-no-swiping"> <!-- 给slide增加swiper-no-swiping类 -->
<p>此Slide将无法拖动</p>
</div>

</div>
</div>
<script>
var mySwiper = new Swiper(.swiper,
noSwiping: true, //使类名‘swiper-no-swiping’生效
)
</script>



[1] swiper官方api

以上是关于swiper中解决文字不能复制的主要内容,如果未能解决你的问题,请参考以下文章

博客网页上的文字不能复制(急)

Vue中swiper手动滑动后不能自动播放的解决方法

使用swiper 遇到的一些问题

网页中复制的文字不能粘贴到word中是啥原因

电脑UC浏览器内容复制

为啥有的pdf不能复制?