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


Posted in Javascript onJanuary 15, 2019

需求

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

浏览器原生方法

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

//在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 文件并不大,但是却可以帮我们做很多事情,减轻很多调试和避免采坑。以上只是记录一下自己遇到的问题,如有错误,还请指正,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 #Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 #Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 #Javascript
JS高阶函数原理与用法实例分析
Jan 15 #Javascript
JS立即执行函数功能与用法分析
Jan 15 #Javascript
vue-cli 目录结构详细讲解总结
Jan 15 #Javascript
webpack file-loader和url-loader的区别
Jan 15 #Javascript
You might like
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
Symfony控制层深入详解
2016/03/17 PHP
php数组分页实现方法
2016/04/30 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
jquery实现穿梭框功能
2021/01/19 jQuery
用Python创建声明性迷你语言的教程
2015/04/13 Python
Python虚拟环境项目实例
2017/11/20 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
Python列表与元组的异同详解
2019/07/02 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
媒体宣传策划方案
2014/05/25 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
商务代表岗位职责
2015/02/15 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
基于Python实现nc批量转tif格式
2022/08/14 Python