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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
javascript的回调函数应用示例
Feb 20 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery操作之效果详解
May 19 jQuery
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
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和javascript之间变量的传递实现代码
2012/12/19 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
YII框架http缓存操作示例
2019/04/29 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
js 居中漂浮广告
2010/03/21 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
python编程的核心知识点总结
2021/02/08 Python
python中封包建立过程实例
2021/02/18 Python
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
用友笔试题目
2016/10/25 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
25岁生日感言
2014/01/13 职场文书
违纪检讨书2000字
2014/02/08 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
委托证明模板
2014/09/16 职场文书
文员岗位职责
2015/02/04 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python