在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 相关文章推荐
JS中showModalDialog 的使用解析
Apr 17 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
JavaScript中的Function函数
Aug 27 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 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
destoon各类调用汇总
2014/06/20 PHP
php实现的操作excel类详解
2016/01/15 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
jquery简单体验
2007/01/10 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
浅谈Python爬虫基本套路
2019/03/25 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
员工年终演讲稿
2014/01/03 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
渡河少年教学反思
2014/02/12 职场文书
主管竞聘书范文
2014/03/31 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
MySQL系列之十一 日志记录
2021/07/02 MySQL
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis