vue粘贴复制功能的实现过程记录

目录

• 引言
• 1. 项目需求图展示：
• 1. 安装第三方插件方法（不推荐）
• 2. 浏览器自带Document.execCommand()复制方法（不推荐）
• 3. Clipboard.writeText方法（强烈推荐）
• 总结

引言

项目中如果实现粘贴复制功能，目前市面上共有三种方法，均有利有弊，大家可以根据自己项目实际情况依次选择。本节将都会对这三种方法做详细阐述，重点推荐第三种方法。

1. 项目需求图展示：

1. 安装第三方插件方法（不推荐）

这种方法兼容性很好，如果项目只使用了一次，不建议使用。

安装插件

npm install clipboard --save

引入插件

import Clipboard from 'clipboard';

项目中使用

2. 浏览器自带Document.execCommand()复制方法（不推荐）

虽然这个方法不需要安装插件，但是官网申明如下：

项目中使用

3. Clipboard.writeText方法（强烈推荐）

说明

Clipboard 接口的 writeText()  方法可以写入特定字符串到操作系统的剪切板。会返回一个Promise ，一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪切板（reject）

项目中使用

onCopy() {
    navigator.clipboard.writeText(this.detailData.clientSecret).then(() => {
        this.$message.success('复制成功')
    })
}

总结

到此这篇关于vue实现粘贴复制功能的文章就介绍到这了,更多相关vue粘贴复制功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！