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实现的仿Flash广告图片轮换效果
Apr 24 Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
JSONP基础知识详解
Mar 19 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 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
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
python实现最大优先队列
2019/08/29 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
波兰在线运动商店:YesSport
2020/07/23 全球购物
贷款担保申请书
2014/05/20 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
队名及霸气口号大全
2015/12/25 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技