更新记录

1.0.5(2021-08-10)

  • 修复 H5端复制失败时创建的节点不会销毁 详情
  • 修复 兼容H5端复制传入number类型报错

1.0.4(2021-02-25)

  • 支持uni_modules插件模块化规范
  • 支持Typescript开发
  • 优化H5获取系统剪贴板内容失败处理
查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

剪贴板

✨ Feature

剪贴板操作插件,全平台兼容,支持设置剪贴板的内容和获取剪贴板的内容

🍵 Install

如果你是从插件市场上下载,直接选择 使用HBuilder X 导入插件 即可。如果使用 npm 则使用下面的方式

# 如果您的项目根目录没有 package.json 文件的话,请先执行如下命令:
npm init -y

# 安装
npm install uni-clipboard

然后在项目根目录下创建 vue.config.js 文件

// vue.config.js

module.exports = {
  transpileDependencies: ['uni-clipboard']
}

🥗 Import

// NPM
import { setClipboardData, getClipboardData } from 'uni-clipboard'

// DCloud
import { setClipboardData, getClipboardData } from '@/uni_modules/u-clipboard/js_sdk'

🥪 API

setClipboardData(text)

设置系统剪贴板的内容

  • 参数:text <string> 需要设置的文本
  • 返回: <Promise>
    • resolve 设置的文本
    • reject 设置失败

getClipboardData()

获取剪贴板的内容

  • 返回: <Promise>
    • resolve 获取成功后的文本
    • reject 获取失败

🧀 Compatibility

在 H5 端存在一定的兼容性问题:

  • setClipboardData 原理是新建 textarea 节点,并将文本赋值到 value,然后全选文本框内容执行复制操作。这里执行复制操作是通过 document.execCommand('copy') 执行,所以该方法存在兼容性。需要注意的是,因 H5 安全性原因,执行该方法最好是在点击事件里,例如直接在钩子函数执行是无效的。
  • getClipboardData 是通过 navigator.clipboard.readText() 获取剪贴板的文本内容。需要注意的是执行该方法必须在 localhosthttps:// 下。该方法也存在兼容性

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问