在vue使用clipboard.js进行一键复制文本的实现示例

需求

最近在做商城项目，有个需求是需要点击复制订单号的，然后就觉得可以使用原生的复制方法和使用第三方库。

浏览器原生方法

这种方式兼容性不是太好，还要看浏览器是否支持，容易采坑。

//在IE中可以用window.clipboardData.setData('text','内容')实现。
//在IE中clipboardData是window的属性,而其他浏览器则是相应的event对象的属性，这实际上是一种安全措施，防止未经授权的访问,为了兼容其他浏览器，所以我们不能通过clipboardData来实现这种操作。
//具体做法：
//1.创建一个隐藏的input框
//2.点击的时候，将要复制的内容放进input框中
//3.选择文本内容input.select()
//4.这里只能用input或者textarea才能选择文本。
//5.执行浏览器的复制命令document.execCommand("copy")。
 function copyText() {
  var text = document.getElementById("text").innerText; // 获取要复制的内容也可以传进来
  var input = document.getElementById("input"); // 获取隐藏input的dom
  input.value = text; // 修改文本框的内容
  input.select(); // 选中文本
  document.execCommand("copy"); // 执行浏览器复制命令
  alert("复制成功");
 }

//在事件中可以通过e 对内容进行修饰
document.body.oncopy = e => {
  // 监听全局复制 做点什么
}
 // 还有这种写法：
document.addEventListener("copy", e => {
 // 监听全局复制 做点什么
});

使用 clipboard.js

我们要先安装

npm install clipboard --save

在 mian.js 中引入，当然我们也可以在用到的 .vue 中引入，因为我不止一个地方用到了复制，所以直接在 main.js 里面引入了。

import clipboard from 'clipboard';
//注册到vue原型上
Vue.prototype.clipboard = clipboard;

在需要的地方使用

//dom
···
<div class="sn Lfll Lmr20">订单编号：
  <span data-clipboard-action="copy" class="cobyOrderSn" :data-clipboard-text="orderData.orderSn" @click="copyLink">{{orderData.orderSn}}</span>
 </div>
···
//js
···
 copyLink() {
   let _this = this;
   let clipboard = new this.clipboard(".cobyOrderSn");
   clipboard.on('success', function () {
    _this.$toast("复制成功")
   });
   clipboard.on('error', function () {
    _this.$toast("复制失败")
   });
 }
···

当然 clipboard.js 的功能可不止这么简单，我们还可使用它进行剪切，还可以通过它复制其他元素的值等，具体的使用可查看官方文档： clipboard.js;

小结

关于浏览器一键复制，推荐使用 clipboard.js 来做，因为现在原生方法兼容性并不是很好，而且 clipboard.js 文件并不大，但是却可以帮我们做很多事情，减轻很多调试和避免采坑。以上只是记录一下自己遇到的问题，如有错误，还请指正，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue使用pdfjs显示PDF可复制的实现方法

    pdf显示的方法 方法一 使用embed标记来使用浏览器自带的pdf工具. 这种实现方式优缺点都很明显: 优点:自带"打印","搜索","翻页"等功能,强大且实现方便. 缺点:不同浏览器的pdf工具样式不一,且无法满足个性化需求,比如:禁止打印,下载等. 方法二 使用Mozilla的PDF.js,自定义展示PDF. 基础功能集成 使用Text-Layers渲染(可实现pdf内容复制) 什么是PDF.JS PDF.js是基于HTML5技术构建的,用

  • Vue使用Clipboard.JS在h5页面中复制内容实例详解

    安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引入clipboard.js import ClipboardJS from "clipboard"; 或 <script src="https://clipboardjs.com/dist/clipboard.min.js"></script>

  • vue 实现复制内容到粘贴板clipboard的方法

    1 . npm安装到项目目录文件中 npm install clipboard --save 2 . import 引入文件 import Clipboard from 'clipboard'; 3 . 在需要html元素中的自定义属性中data-clipboard-text 中写入要复制的内容 <button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="

  • Vue中使用clipboard实现复制功能

    clipboard.js 是一个不需要flash,将文本复制到剪贴板的插件.下面给大家介绍Vue中使用clipboard实现复制功能,具体内容如下所示: 首先现在Vue中引入clipboard npm install clipboard --save 在需要使用的组件中import 引入clipboard import Clipboard from 'clipboard'; clipboard的实际使用 不论是单按钮复制还是多按钮复制,一定要在页面加载DOM完成后先New出来具有复制功能的按钮,

  • Vue实现点击按钮复制文本内容的例子

    点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下: 1.引入clipboard.js,方法如下: 第一种直接npm安装:npm install clipboard --save 第二种:<script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.

  • VUE 实现复制内容到剪贴板的两种方法

    VUE 复制内容至剪切板(两种使用方法) 复制内容至剪切板使用的是插件'vue-clipboard2',通过官方文档会发现共有两种使用方式. 第一种方式与大多数文章类似,只粘贴代码: <template> <div class="container"> <input type="text" v-model="message"> <button type="button" v-clipb

  • Vue 实现复制功能,不需要任何结构内容直接复制方式

    介绍: 在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现. 在查阅资料时候,发现其他人都需要在页面上写上结构.ID.然后捕捉某个ID获取内容,感觉很不方便. 使用: methods: { copyShaneUrl(shareLink){ var input = document.createElement("input"); // 直接构建input input.value = shareLink; // 设置内容 d

  • 浅析vue深复制

    Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. const object1 = { a: 1, b: 2, c: 3 }; const object2 = Object.assign({}, object1); console.log(object2.c); // expected output: 3 或者使用 obj=JSON.parse(JSON.stringify(this.templateData)); //this.te

  • 在vue使用clipboard.js进行一键复制文本的实现示例

    需求 最近在做商城项目,有个需求是需要点击复制订单号的,然后就觉得可以使用原生的复制方法和使用第三方库. 浏览器原生方法 这种方式兼容性不是太好,还要看浏览器是否支持,容易采坑. //在IE中可以用window.clipboardData.setData('text','内容')实现. //在IE中clipboardData是window的属性,而其他浏览器则是相应的event对象的属性,这实际上是一种安全措施,防止未经授权的访问,为了兼容其他浏览器,所以我们不能通过clipboardData来

  • JS插件clipboard.js实现一键复制粘贴功能

    JS插件clipboard.js实现一键复制粘贴功能

    一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js. 官网地址 下载到本地后,将其放入项目中,直接引用即可.具体实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一键复制粘贴</title> <style> .transfer { width: 90%; margin: 20px auto; fon

  • 使用clipboard.js库实现复制剪切功能

    使用clipboard.js库实现复制剪切功能

    项目地址:https://github.com/zenorocha/clipboard.js 现代化的“复制到剪切板”插件.不包含 Flash.gzip 压缩后仅 3kb. 为什么使用它 复制文字到剪切板不应该很难去实现.它不需要配置几十个步骤或者加载几百 KB 的文件.最重要的是,它不应该依赖 Flash 或其他臃肿的框架. 这是 clipboard.js 诞生的原因. 安装 你可以通过 npm 来安装它. npm install clipboard --save 如果你不使用包管理,仅需要下

  • JS实现一键复制

    JS实现一键复制

    原生js实现点击按钮复制文本,供大家参考,具体内容如下 最近遇到一个需求,需要点击按钮,复制 聊天记录的文本到剪切板 一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板 但是 select() 方法只对 和 有效,对于就不好使 最后我的解决方案是,在页面中添加一个 ,然后把它隐藏掉点击按钮的时候,先把 的

  • 利用js实现禁止复制文本信息

    做SEO的都知道,发原创文章对自己网站的优化是非常好的,特别是在搜文章标题的时候,原创的一般排名第一.但是优化是给搜索引擎看的.而在互联网有个很头痛的问题,一篇文章对搜索引擎来说到底谁是原创.这个是不一定的.举个简单例子:比如你在博客(当然假设你博客每日访问量很低,每天就几百人的情况下)上发表了一篇优质原创文章.但没过几小时或几天被人转载到了一个大型门户网站还不带你文章的原创连接的,比如 A5 这种网站.那么过段时间,你再搜文章的标题的时候,谁排第一这个就不好说了.本人可是有这种亲身体会的.为此

  • JS基于clipBoard.js插件实现剪切、复制、粘贴

    摘要: 最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢? 地址:https://github.com/baixuexiyang/clipBoard.js 方法: 复制 var copy = new clipBoard(document.getElementById('data'), { beforeCopy:

  • js实现点击按钮复制文本功能

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板 但是 select() 方法只对 <input>

  • clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

    clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

    我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js. 运行效果图: HTML 首先加载本地clipboard.js文件. <script src="clipboard.min.js"></script> 然后就是在body中加上要复

  • Clipboard.js 无需Flash的JavaScript复制粘贴库

    Clipboard.js 无需Flash的JavaScript复制粘贴库

    clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能.可以在浏览器和 Node 环境中使用.支持 Chrome 42+.Firefox 41+.IE 9+.Opera 29+ 官方网站:https://github.com/zenorocha/clipboard.js 软件下载:http://www.jb51.net/jiaoben/385604.html 官方使用方法:https://zenorocha.github.io/clipbo

随机推荐