免费资源部落

本篇内容介绍了“微信小程序如何实现文字长按复制与一键复制功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

一、不引入外部组件的实现方式<!--index.wxml--><view><!--长按复制--><viewbindlongtap="copyText"data-key="{{item.cdkey}}">{{item.cdkey}}</view><textbindlongtap="copyText"data-key="{{item.cdkey}}">{{item.cdkey}}</text><!--一键复制--><viewbindtap="copyText"data-key="{{item.cdkey}}">复制</view></view>

长按复制 可利用 bindlongtap 方法，手指长按 500ms 之后触发事件。

一键复制 可利用 bindtap 方法，点击立即触发事件。

//index.jscopyText(e){letkey=e.currentTarget.dataset.key;wx.setClipboardData({//设置系统剪贴板的内容data:key,success(res){console.log(res,key);wx.getClipboardData({//获取系统剪贴板的内容success(res){wx.showToast({title:'复制成功',})}})}})}

注：样式可自行添加适合的样式

效果：

二、引入外部组件的实现方式

select-text

可选文本组件。该组件有两种使用模式：长按出现选区，与浏览器默认效果一致；长按出现复制按钮，点击复制拷贝全部内容至剪贴板，常见于聊天对话框等场景。

需注意的时，为实现点击其它区域隐藏复制按钮，开发者可在页面最外层监听 tap 事件，并将 evt 对象赋值给 on-document-tap。

安装

npm install @miniprogram-component-plus/select-text

在页面 page.json 中

//page.json{"usingComponents":{"mp-select-text":"@miniprogram-component-plus/select-text"}}

在页面index.wxml中

<viewbind:tap="handleTap"><viewclass="demo-block"><blockwx:for="{{arr}}"wx:key="placement"><viewclass="list-item"><mp-select-textshow-copy-btnplacement="{{item.placement}}"value="{{item.value}}"data-id="{{index}}"bindcopy="onCopy"on-document-tap="{{evt}}"></mp-select-text></view></block><viewclass="list-item"><mp-select-textvalue="默认的长按效果与浏览器一致"></mp-select-text></view></view></view>

效果

“微信小程序如何实现文字长按复制与一键复制功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！