在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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
js 操作符实例代码
Oct 24 Javascript
jquery 问答知识整理
Feb 11 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
vue移动端写的拖拽功能示例代码
Sep 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
example1.php
2006/10/09 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
PHP查询快递信息的方法
2015/03/07 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
mysql 之通过配置文件链接数据库
2017/08/12 Python
答题辅助python代码实现
2018/01/16 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
分分钟入门python语言
2018/03/20 Python
TensorFlow的权值更新方法
2018/06/14 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python 如何创建一个线程池
2020/07/28 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
幼儿园教师考核制度
2014/02/01 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
走群众路线学习笔记
2014/11/06 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
Python3 类型标注支持操作
2021/06/02 Python
Python极值整数的边界探讨分析
2021/09/15 Python
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis