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 相关文章推荐
jquery实现的导航固定效果
Apr 28 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[01:44]Ti10举办地公布
2019/08/25 DOTA
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
flask项目集成swagger的方法
2020/12/09 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
业务内勤岗位职责
2015/04/13 职场文书
书法社团活动总结
2015/05/07 职场文书
社区挂职锻炼个人工作总结
2015/10/23 职场文书
Python 内置函数速查表一览
2021/06/02 Python
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记