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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
浅析php数据类型转换
2014/01/09 PHP
图片完美缩放
2006/09/07 Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Python编码爬坑指南(必看)
2016/06/10 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
如何使用Python调整图像大小
2020/09/26 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
架构师岗位职责
2013/11/18 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
初中政治教师教学反思
2016/02/23 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis