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 基础知识 被自己遗忘的
Oct 15 Javascript
Script的加载方法小结
Jan 12 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 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正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP之短标签开启设置
2013/06/17 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
event.srcElement+表格应用
2006/08/29 Javascript
JavaScript与函数式编程解释
2007/04/27 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中的高级数据结构详解
2015/03/27 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
TensorFlow变量管理详解
2018/03/10 Python
python实现批量图片格式转换
2020/06/16 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
python如何实时获取tcpdump输出
2020/09/16 Python
小学六年级学生评语
2014/04/22 职场文书
离婚协议书格式
2014/11/21 职场文书
校车安全管理责任书
2015/05/11 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
pt-archiver 主键自增
2022/04/26 MySQL