vue 实现复制内容到粘贴板clipboard的方法


Posted in Javascript onMarch 17, 2018

1 . npm安装到项目目录文件中

npm install clipboard --save

2 . import 引入文件

import Clipboard from 'clipboard';

3 . 在需要html元素中的自定义属性中data-clipboard-text 中写入要复制的内容

<button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="text">复制地址</button>

4 . 在JavaScript中通过类名找到元素中的内容。

let clipboard = new Clipboard('.copyBtn');

vue 实现复制内容到粘贴板clipboard的方法

就是这个样子了,如果需要这个地址,直接在方法中引用clipboard这个变量就可以了,不需要的话就不用管这个变量,它不需要做任何处理,单击那个类名为copyBtn的按钮以后,直接Ctrl+v就可以了.

以上这篇vue 实现复制内容到粘贴板clipboard的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的事件描述
Sep 08 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 #Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 #Javascript
vue实现a标签点击高亮方法
Mar 17 #Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 #Javascript
Vue 实现双向绑定的四种方法
Mar 16 #Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 #Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 #Javascript
You might like
Windows下的PHP5.0详解
2006/11/18 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
在Python中使用元类的教程
2015/04/28 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python中enumerate函数代码解析
2017/10/31 Python
python实现自动登录后台管理系统
2018/10/18 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Django实现内容缓存实例方法
2020/06/30 Python
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
护理人员的自我评价分享
2014/03/15 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
关于运动会的广播稿
2015/08/19 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Python如何配置环境变量详解
2021/05/18 Python