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与HTML的交互事件
Apr 12 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
js实现索引图片切换效果
Nov 21 Javascript
localStorage实现便签小程序
Nov 28 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
php生成excel列序号代码实例
2013/12/24 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
Vue精简版风格概述
2018/01/30 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
python带参数打包exe及调用方式
2019/12/21 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Pycharm安装python库的方法
2020/11/24 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
环保志愿者活动总结
2014/06/27 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
Nginx的gzip相关介绍
2022/05/11 Servers