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 相关文章推荐
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
ECMAScript6--解构
Mar 30 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
如何利用vue实现波谱拟合详解
Nov 05 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
php中session退出登陆问题
2014/02/27 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
js 深拷贝函数
2008/12/04 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
对python读取CT医学图像的实例详解
2019/01/24 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
PHP面试题大全
2015/10/16 面试题
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
素质教育培训心得体会
2016/01/19 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书