Vue中使用clipboard实现复制功能


Posted in Javascript onSeptember 05, 2018

clipboard.js 是一个不需要flash,将文本复制到剪贴板的插件。下面给大家介绍Vue中使用clipboard实现复制功能,具体内容如下所示:

首先现在Vue中引入clipboard

npm install clipboard --save

在需要使用的组件中import 引入clipboard

import Clipboard from 'clipboard';

clipboard的实际使用

不论是单按钮复制还是多按钮复制,一定要在页面加载DOM完成后先New出来具有复制功能的按钮,如果在函数内再New那么可能会出现点击复制按钮两次,才复制成功的现象,如下:

mounted() {
  var copybtn = document.getElementsByClassName('btn')
  this.clipboard = new Clipboard(copybtn);
  }
<!--并不一定非要在mounted中也可以在其他周期内,

    只要页面已经加载完DOM即可,如果是动态生成可以使用nextTick中New。-->

绑定复制内容的方式有以下几种:

<!--第一种直接绑定在按钮上-->
 <button class="marleft10 btn" style="float: right;border: none;" :data-clipboard-text="2"
    @click="copy()">复制
    </button>
<!--第二种单个复制按钮动态获取需要复制的内容-->
<input type="text" v-model="copyContent" id="copy_text" style="opacity: 0">
<button ref="copy" data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">复制</button>
<!--第三种可以在New Clipboard时设定要复制的内容-->
new Clipboard('copyBtn',function(){
  return <!--要复制的内容-->
})
copy(){
  let _this = this
  <!--如果在内部new会出现点击两次在复制成功的现象所以还请各位多多注意-->
  clipboard.on('success', function () {
    Toast('复制成功')
    _this.destroy() <!--销毁缓存,然后在重新new这样不会出现点击复制上出现之前复制的内容的情况-->
    _this.clipboard = new Clipboard(copyBtn);
  })
  clipboard.on('error', function () {
    Toast('复制失败,请手动复制')
   })
  }

总结

以上所述是小编给大家介绍的Vue中使用clipboard实现复制功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 #Javascript
Vue-cli@3.0 插件系统简析
Sep 05 #Javascript
vue实现点击选中,其他的不选中方法
Sep 05 #Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 #Javascript
Node.js 使用request模块下载文件的实例
Sep 05 #Javascript
详解Angular6学习笔记之主从组件
Sep 05 #Javascript
webpack4 入门最简单的例子介绍
Sep 05 #Javascript
You might like
PHP安全性漫谈
2012/06/28 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
JavaScript 调试器简介
2009/02/21 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
Python Web版语音合成实例详解
2019/07/16 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
Python request操作步骤及代码实例
2020/04/13 Python
keras多显卡训练方式
2020/06/10 Python
python中常见错误及解决方法
2020/06/21 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
前台领班岗位职责
2013/12/04 职场文书
火车的故事教学反思
2014/02/11 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
解除租赁合同协议书
2016/03/21 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL