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部分：

<p id="target">这里是我要复制的内容呀!</p>

<button @click="copyBtn" id="copyBtn" data-clipboard-action="copy" data-clipboard-target="#target">点击按钮复制</button>

注：给按钮添加两个属性--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部分：

copyBtn () {

let clipboard = new Clipboard(‘#copyBtn‘)

clipboard.on(‘success‘, function (e) {
　// 复制目标文本给指定变量
  _this.forwordText = e.text
  e.clearSelection()
})

}

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

clipboard.destroy();

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

原文：https://www.cnblogs.com/candy-xia/p/11377360.html