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原生方法创建表格效率测试
Jul 08 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 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定时任务获取微信access_token的方法
2016/10/10 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
详解ES6中的let命令
2020/04/05 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
js实现简单模态框实例
2018/11/16 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
党员公开承诺书范文
2014/03/25 职场文书
聘用意向书范本
2014/04/01 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
小学生安全责任书
2014/07/25 职场文书
商场周年庆活动方案
2014/08/19 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
python 命令行传参方法总结
2021/05/25 Python
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
vue实现在data里引入相对路径
2022/06/05 Vue.js