在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访问样式表代码
Oct 15 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
javascript操作表格排序实例分析
May 06 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
AngularJS上传文件的示例代码
Nov 10 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+javascript实现二级级联菜单的制作
2008/05/06 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
用于table内容排序
2006/07/21 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python argparse模块应用实例解析
2019/11/15 Python
Pyqt5自适应布局实例
2019/12/13 Python
python程序输出无内容的解决方式
2020/04/09 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
办公室文秘岗位职责
2013/11/15 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
师德承诺书2015
2015/04/28 职场文书
早上好问候语大全
2015/11/10 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
Python利用zhdate模块实现农历日期处理
2022/03/31 Python