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 常用校验函数
Mar 26 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
package.json文件配置详解
Jun 15 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
如何制作自己的原生JavaScript路由
May 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
php MessagePack介绍
2013/10/06 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
php精度计算的问题解析
2019/06/21 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
js实现录音上传功能
2019/11/22 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
python实现TF-IDF算法解析
2018/01/02 Python
python cs架构实现简单文件传输
2020/03/20 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python实现粒子群算法的示例
2021/02/14 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
大学专科生推荐信范文
2013/11/23 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
摘录式读书笔记
2015/07/01 职场文书
投诉信格式范文
2015/07/02 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL