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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
Javascript之this关键字深入解析
Nov 12 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
详解js的视频和音频采集
Aug 09 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
JS数组的常用10种方法详解
May 08 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
操作Oracle的php类
2006/10/09 PHP
php 分页类 扩展代码
2009/06/11 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
php写的AES加密解密类分享
2014/06/20 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
javascript globalStorage类代码
2009/06/04 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
2014年个人工作总结范文
2014/11/07 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
写给医院的感谢信
2015/01/22 职场文书
感动中国何玥观后感
2015/06/02 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
浅谈Redis的事件驱动模型
2022/05/30 Redis