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

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

 

  
  {{ item.cdkey }}
  {{ item.cdkey }}
   
   复制 

• 长按复制 可利用 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中

效果