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获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
JS重载实现方法分析
Dec 16 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
小程序实现投票进度条
Nov 20 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php实现多维数组排序的方法示例
2017/03/23 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
Prototype String对象 学习
2009/07/19 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
js module大战
2019/04/19 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python的Django框架中的表单处理示例
2015/07/17 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python实现Virginia无密钥解密
2019/03/20 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
Linux面试题LINUX系统类
2015/11/25 面试题
上课打牌的检讨书
2014/02/15 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
交通处罚决定书
2015/06/24 职场文书
技术入股协议书
2016/03/22 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL