需求:使用 clipboardjs实现文本内容复制粘贴功能
效果图:
为什么要使用clipboard
clipboard.js 让web复制文本到剪贴板不再困难,它使用起来非常简单,仅仅需要几句简单的js代码,而不需要几十个步骤来进行配置或加载数百KB的文件。 更重要的是,它不依赖于 Flash 或 JQuery 或任何臃肿的框架。
安装clipboard :
npm install clipboard --save
页面引入:
import Clipboard from "clipboard"
也可以使用第三方cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
复制内容:
item.content是当前循环的内容
<div @click="handleCopy" class="copy copyCode backMsg" :data-clipboard-text="item.content">
<img src="../../assets/img/copy.png" class="msgImg">
<span>复制</span>
</div>
// 复制粘贴
handleCopy() {
var clipboard = new Clipboard(".copy");
clipboard.on("success", e => {
this.$toast({
message: "复制成功",
onClose: () => {
// 释放内存
clipboard.destroy();
}
});
});
clipboard.on("error", e => {
this.$toast({
message: "复制失败",
onClose: () => {
// 释放内存
clipboard.destroy();
}
});
});
},
扩展
剪切内容 :
可以定义一个 data-clipboard-action 属性来指定是要复制还是剪切内容。
如果省略此属性,默认情况下将使用复制。
<textarea id="textValue">船长在船上</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#textValue">
Cut to clipboard
</button>