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 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
javascript基础知识讲解
Jan 11 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 Javascript
JavaScript实现栈结构详细过程
Dec 06 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
dedecms系统常用术语汇总
2007/04/03 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php生成QRcode实例
2014/09/22 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
浅谈django 重载str 方法
2020/05/19 Python
2014全国两会学习心得体会2000字
2014/03/10 职场文书
铲车司机岗位职责
2014/03/15 职场文书
酒店管理求职信范文
2014/04/06 职场文书
合作协议书怎么写
2014/04/18 职场文书
小区推广策划方案
2014/06/06 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
环境建议书
2015/02/04 职场文书
公司食堂管理制度
2015/08/05 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
《检阅》教学反思
2016/02/22 职场文书
vue+echarts实现多条折线图
2022/03/21 Vue.js
改造DE1103三步曲
2022/04/07 无线电