这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下。
项目地址:https://github.com/zenorocha/clipboard.js

下面我就简单记录一下,我对clipboard.js的小小见解。

安装:

npm install clipboard --save

安装完成后,会在项目目录下的node_modules文件夹下找到clipboard文件夹

注:如果不是vue项目,可以去官网https://clipboardjs.com/下载js,通过<script src='clipboard.js'></script>使用

使用:

在需要使用的地方引入import Clipboard from 'clipboard'

html部分:

注:给按钮添加两个属性--data-clipboard-target和data-clipboard-action

  data-clipboard-target属性的值就是能匹配到另一个元素的选择器;data-clipboard-action属性来指明你想要复制(copy)还是剪切(cut)内容,默认copy;

  还需要注意的是如果设置cut动作只在 <input> 或 <textarea> 元素起作用。

  如果你不需要从另一个元素来复制内容。你仅需要给目标元素设置一个 data-clipboard-text 属性就可以了; data-clipboard-text 属性值为你设置的固定内容

js部分:

最后,如果你使用单页应用,你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。

clipboard.destroy();

js实现复制|剪切指定内容到粘贴板--clipboard的更多相关文章

  1. js插件实现点击复制内容到粘贴板,兼容IE8

    先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...

  2. js实现复制内容到粘贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  4. vue复制textarea文本域内容到粘贴板

    vue实现复制内容到粘贴板   方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...

  5. js 实现复制剪切

    原生js实现复制 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  6. vue 复制内容到粘贴板

    首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...

  7. Intellij IDE使用 ideavim,不能复制文档到系统粘贴板

    vim的yank命令默认不会复制到系统粘贴板,而是粘贴到寄存器.你可以使用* 或 +寄存器来访问系统粘贴板. 在~/.ideavimrc (如果不存在就创建) 中添加下列选项 set clipboar ...

  8. JS 操作复制剪切粘贴

    测试了很多次之后,虽然有点细碎的突破,但还是想说,麻辣隔壁... 众所周知使用 oncut/oncopy/onpaste 监听剪切板,采用 window.clipboardData 并不是适用于大多浏 ...

  9. js 复制内容到粘贴板的兼容性

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

随机推荐

  1. MVC默认提供了一个异常过滤器 HandleErrorAttribte特性

    这一篇记录MVC默认提供了一个异常过滤器 HandleErrorAttribte,下一篇介绍自定义异常过滤特性. 参考引用:https://www.cnblogs.com/TomXu/archive/ ...

  2. 【leetcode】sudokuSolver数独解题

    0.摘要 小时候在报纸上玩过数独,那时候觉得很难,前几天在leetcode上遇到了这个题,挺有意思于是记录下来 一般一道数独题,就像他给的例子这样,9*9的格子,满足 行,列 ,宫均取1-9的数,切互 ...

  3. SVN server 服务端修改端口号

    SVN server 服务端修改端口号 在实际使用中可能当安装svn server 服务后,发现与后续其他程序端口冲突, 1.打开svn server 管理界面->操作->properti ...

  4. BZOJ 3622: 已经没有什么好害怕的了(二项式反演)

    传送门 解题思路 首先将\(a\),\(b\)排序,然后可以算出\(t(i)\),表示\(a(i)\)比多少个\(b(i)\)大,根据容斥套路,设\(f(k)\)表示恰好有\(k\)个\(a(i)\) ...

  5. hdu 5279 YJC plays Minecraft——生成函数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5279 令 n 个点的树的 EGF 是 g(x) ,则 \( g(x) = \sum\limits_{i=0 ...

  6. javascript 对象的设计模式

    1.为什么学习设计模式:http://www.iteye.com/news/32092   或  https://blog.csdn.net/pigpigpig4587/article/details ...

  7. echarts 柱状图 X(Y)轴数据过多时,滑动以及内置缩放的问题

    前言:在开发中碰到的情况(菜鸟出门).           在使用echarts 图表的时候发现要展示的数据过多,但是系统留的展示框太小,造成数据都挤压在一块(不好看而且新感觉很不专业).       ...

  8. PHP如何进行错误与异常处理(PHP7中的异常处理和之前版本异常处理的区别)

    PHP如何进行错误与异常处理(PHP7中的异常处理和之前版本异常处理的区别) 一.总结 一句话总结: throwable接口+Error类 在PHP7更新中有一条:更多的Error变为可捕获的Exce ...

  9. 46、tensorflow入门初步,手写识别0,1,2,3,4,5,6

    1.使用tensorflow的SoftMax函数,对手写数字进行识别 Administrator@SuperComputer MINGW64 ~ $ docker run -it -p 8888:88 ...

  10. shell 字符串匹配变量(只取数字或者取固定字符串)

    var1=abc3559   #想要获得3559 操作: var1_key=`echo $var1 | tr -cd "[0-9]"` https://www.cnblogs.co ...