在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 图片上一张下一张链接效果代码
Mar 12 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
JavaScript实现前端倒计时效果
Feb 09 Javascript
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
PHP中的日期及时间
2006/11/23 PHP
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
小程序使用分包的示例代码
2020/03/23 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python切片操作实例分析
2018/03/16 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
青春无悔演讲稿
2014/05/08 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
2015年宣传工作总结
2015/04/08 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
对讲机的最大通讯距离是多少
2022/02/18 无线电
MySQL RC事务隔离的实现
2022/03/31 MySQL