vue如何实现粘贴复制功能

这篇文章主要介绍了vue如何实现粘贴复制功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

引言

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

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如何实现粘贴复制功能"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!