vue粘贴复制功能的实现过程记录
引言
项目中如果实现粘贴复制功能,目前市面上共有三种方法,均有利有弊,大家可以根据自己项目实际情况依次选择。本节将都会对这三种方法做详细阐述,重点推荐第三种方法。
1. 项目需求图展示:
1. 安装第三方插件方法(不推荐)
这种方法兼容性很好,如果项目只使用了一次,不建议使用。
安装插件
npm install clipboard --save
引入插件
import Clipboard from 'clipboard';
项目中使用
<template> <span class="copy" @click="onCopy"> <i class="iconfont iconcopy"></i> <span>点击复制</span> </span> </template> <script> methods: { onCopy(){ let clipboard = new Clipboard('.copy') clipboard.on('success', e => { console.log('复制成功') // 释放内存 clipboard.destroy() }) clipboard.on('error', e => { // 不支持复制 console.log('该浏览器不支持自动复制') // 释放内存 clipboard.destroy() }) } } </script>
2. 浏览器自带Document.execCommand()复制方法(不推荐)
虽然这个方法不需要安装插件,但是官网申明如下:
项目中使用
<script> methods: { onCopy(){ //创建一个input框 const input = document.createElement("input") //将指定的DOM节点添加到body的末尾 document.body.appendChild(input) //设置input框的value值为直播地址 input.setAttribute("value", e) //选取文本域中的内容 input.select() //copy的意思是拷贝当前选中内容到剪贴板 //document.execCommand()方法操纵可编辑内容区域的元素 //返回值为一个Boolean,如果是 false 则表示操作不被支持或未被启用 if (document.execCommand("copy")) { document.execCommand("copy") } //删除这个节点 document.body.removeChild(input) } </script>
3. Clipboard.writeText方法(强烈推荐)
说明
Clipboard 接口的 writeText() 方法可以写入特定字符串到操作系统的剪切板。会返回一个Promise ,一旦剪贴板的内容被更新,它就会被解析。如果调用者没有写入剪贴板的权限,则拒绝写入剪切板(reject)
项目中使用
onCopy() { navigator.clipboard.writeText(this.detailData.clientSecret).then(() => { this.$message.success('复制成功') }) }
总结
到此这篇关于vue实现粘贴复制功能的文章就介绍到这了,更多相关vue粘贴复制功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue-cli中devServer.proxy相关配置项的使用
这篇文章主要介绍了vue-cli中devServer.proxy相关配置项的使用详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04Vue ElementUi同时校验多个表单(巧用new promise)
这篇文章主要介绍了巧用new promise实现Vue ElementUi同时校验多个表单功能,实现的方法有很多种,本文给大家带来的是一种比较完美的方案,需要的朋友可以参考下2018-06-06在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
本文以 Vue-CLI 为例介绍引入 simple-mock 实现前端开发数据模拟的步骤。感兴趣的朋友跟随小编一起看看吧2018-11-11
最新评论