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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
[原创]站长必须要知道的javascript广告代码
May 30 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
range 标准化之获取
Aug 28 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
js中this对象用法分析
Jan 05 Javascript
微信小程序开发实现消息推送
Nov 18 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
Terran兵种介绍
2020/03/14 星际争霸
如何分别全角和半角以避免乱码
2006/10/09 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
php设计模式之委托模式
2016/02/13 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python实现最大子序和的方法示例
2019/07/05 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
学校献爱心活动总结
2014/07/08 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
维稳工作情况汇报
2014/10/27 职场文书
高一地理教学工作总结
2015/08/12 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python