在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
node.js中的console.assert方法使用说明
Dec 10 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
react 项目中引入图片的几种方式
Jun 02 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
JS中的作用域链
2017/03/01 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python远程邮件控制电脑升级版
2019/05/23 Python
python基于win32api实现键盘输入
2020/12/09 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
护士试用期自我鉴定
2014/02/08 职场文书
幼儿园优秀教师事迹
2014/02/13 职场文书
优秀班组长事迹
2014/05/31 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
解决pytorch-gpu 安装失败的记录
2021/05/24 Python
MySQL GRANT用户授权的实现
2021/06/18 MySQL
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL