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 (用setTimeout而非setInterval)
Dec 28 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
vue axios整合使用全攻略
May 24 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 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的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php实现httpRequest的方法
2015/03/13 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
犀利的js 函数集合
2009/06/11 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
高一生物教学反思
2014/01/17 职场文书
企业管理标语
2014/06/10 职场文书
五心教育心得体会
2014/09/04 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers