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的一些总结
Nov 03 Javascript
div模拟选择框示例代码
Nov 03 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
node内置调试方法总结
Feb 22 Javascript
详解javascript replace高级用法
Feb 17 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
js精度溢出解决方案
2012/12/02 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
ie9 提示'console' 未定义问题的解决方法
2014/03/20 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JavaScript错误处理
2015/02/03 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
小程序实现搜索框功能
2020/03/26 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
python获得一个月有多少天的方法
2015/06/04 Python
Django中间件基础用法详解
2019/07/18 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
python微信公众号开发简单流程实现
2020/03/09 Python
python re.match()用法相关示例
2021/01/27 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
士力架广告词
2014/03/20 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
财务出纳岗位职责
2015/03/31 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
初中政治教学反思
2016/02/23 职场文书
Javascript webpack动态import
2022/04/19 Javascript