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:文字不间断向左移动的实例代码
Aug 08 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 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
德生H-501的评价与改造
2021/03/02 无线电
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python编写登陆接口的方法
2017/07/10 Python
django框架自定义用户表操作示例
2018/08/07 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Python实现自动访问网页的例子
2020/02/21 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
值传递还是引用传递
2015/02/08 面试题
介绍下java.util.Arrays类
2012/10/16 面试题
班长自荐书范文
2014/02/11 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
人事经理岗位职责
2014/04/28 职场文书
大跃进口号
2014/06/16 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python