微信小程序实现文字长按复制、一键复制功能

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

 <!-- index.wxml -->
<view><!-- 长按复制 --><view bindlongtap="copyText" data-key="{{item.cdkey}}">{{ item.cdkey }}</view><text bindlongtap="copyText" data-key="{{item.cdkey}}">{{ item.cdkey }}</text><!-- 一键复制 --><view bindtap="copyText" data-key="{{item.cdkey}}" > 复制 </view>
</view>

长按复制可利用 bindlongtap 方法，手指长按 500ms 之后触发事件。
一键复制可利用 bindtap 方法，点击立即触发事件。

// index.jscopyText(e) {let key = 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中

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

效果

具体实现请参考：select-text组件

赶快去试试吧~

微信小程序实现文字长按复制、一键复制功能相关推荐

微信小程序之 rich-text 长按复制事件
微信小程序的富文本编辑器 rich-text 没有提供长按出现复制剪切功能,下面是为大家提供的长按实现复制的简单功能,效果没有微信聊天页长按复制的效果好. 步骤: 1,在 rich-text 表签里添 ...
微信小程序富文本长按复制粘贴
小程序里面想要长按可以复制的话,得用text组件,但是text不能转换富文本内容.要转换富文本内容,得用rich-text组件,但是rich-text又不支持复制我也是苦恼了好久,就用了一个蠢办法, ...
微信小程序实现文字滚动
微信小程序实现文字滚动 1.wxml <view class="container"><view class='list' animation="{{a ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
java与微信小程序通讯_java与微信小程序实现websocket长连接
本文实例为大家分享了java与微信小程序实现websocket长连接的具体代码,供大家参考,具体内容如下背景: 需要在小程序实现地图固定坐标下实时查看消息 java环境 :tomcat7 jdk1. ...
微信是与服务器长连接,java与微信小程序实现websocket长连接.pdf
java与与微微信信小小程程序序实实现现websocket长长连连接接本文实例为大家分享了j ava与微信小程序实现websocket长连接的具体代码,供大家参考,具体内容下背背景景:: 需要在 ...
微信小程序计算圆周长和面积
微信小程序--计算圆周长和面积一..js文件二..wxml文件三..wxss文件结果展示一..js文件截图代码如下: data: {result:"",intst:& ...
微信小程序图片文字水平垂直居中对齐
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序图片文字水平垂直居中对齐要实现水平垂直居中可使用如下方案给父元素设置 .td {dis ...
小程序如何做成html的滚动字幕,微信小程序实现文字滚动
本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下 wxml: 显示完后再显示: {{text}} 出现白边后即显示: {{text}} {{text}} wxss: .e ...

微信小程序实现文字长按复制、一键复制功能

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

效果：

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

微信小程序实现文字长按复制、一键复制功能相关推荐

最新文章

热门文章