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

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

 <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.js copyText(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组件

赶快去试试吧~

来源地址：https://blog.csdn.net/qq_38970408/article/details/128563791