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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
jquery实现图片预加载
Dec 25 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
Vue和React有哪些区别
Sep 12 Javascript
Echarts如何重新渲染实例详解
May 30 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
PHP VS ASP
2006/10/09 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
javascript中window.event事件用法详解
2012/12/11 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
计算机相关的自我评价
2014/01/15 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
2015个人半年总结范文
2015/03/09 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏