Vue实现点击按钮复制文本内容的例子


Posted in Javascript onNovember 09, 2019

点击复制功能主要通过 clipboard.js 来实现

在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下:

1、引入clipboard.js,方法如下:

第一种直接npm安装:npm install clipboard --save

第二种:<script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.com/)

2、在需要使用的组件中import

引用方法:import Clipboard from 'clipboard';

3、添加需要复制的内容

例如:<button class="tag-read" data-clipboard-text="我是可以复制的内容,请点击复制" @click="copy">立即阅读</button>

解析: data-clipboard-text 后边跟需要复制的内容

4、添加点击后的方法

copy() {
  var clipboard = new Clipboard('.tag-read')
  clipboard.on('success', e => {
   console.log('复制成功')
   // 释放内存
   clipboard.destroy()
  })
  clipboard.on('error', e => {
   // 不支持复制
   console.log('该浏览器不支持自动复制')
   // 释放内存
   clipboard.destroy()
  })
  }

以上这篇Vue实现点击按钮复制文本内容的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
JavaScript中的Function函数
Aug 27 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
Node.js Event Loop各阶段讲解
Mar 08 Javascript
javascript的this关键字详解
May 20 Javascript
js实现时钟定时器
Mar 26 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 #Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 #Javascript
js实现的在本地预览图片功能示例
Nov 09 #Javascript
vue 取出v-for循环中的index值实例
Nov 09 #Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 #Javascript
Vue实现页面添加水印功能
Nov 09 #Javascript
vue 实现特定条件下绑定事件
Nov 09 #Javascript
You might like
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
layui文件上传实现代码
2017/05/20 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
python简单猜数游戏实例
2015/07/09 Python
详解Python中dict与set的使用
2015/08/10 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python制作抽奖程序代码详解
2021/01/15 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
地理科学专业毕业生求职信
2013/10/15 职场文书
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
办理居住证介绍信
2014/01/15 职场文书
党员党性分析材料
2014/02/17 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
话题作文之呼唤
2019/12/18 职场文书