js实现复制|剪切指定内容到粘贴板--clipboard

这是著名开源项目 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();