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 相关文章推荐
JS操作数据库的实例代码
Oct 17 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
Angular2安装angular-cli
May 21 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
vue车牌号校验和银行校验实战
Jan 23 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
在PHP中使用模板的方法
2008/05/24 PHP
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
vue脚手架及vue-router基本使用
2018/04/09 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
关于Django外键赋值问题详解
2017/08/13 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
生物技术研究生自荐信
2013/11/12 职场文书
酒店保洁主管岗位职责
2013/11/28 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
Golang bufio详细讲解
2022/04/21 Golang