本文详细介绍 clipboard.js 插件的使用，涵盖从 target、Function 到 data-clipboard-text 属性三种复制方式。重点解析 Function 模式下直接返回节点或文本内容的两种实现，以及多节点批量处理。同时提供浏览器兼容性检测与 iOS 系统下的优雅降级方案，确保在 Chrome、Firefox、IE9+ 等主流浏览器中稳定运行。
（1）介绍：
clipboard.js 是一款轻量级的 JavaScript 插件，主要用于实现将文本内容复制到系统剪贴板的功能。它支持从输入框、文本域以及 DIV 等元素中提取文本并复制到剪贴板。
该插件兼容主流浏览器，包括 Chrome 42+、Firefox 41+、IE 9+、Opera 29+ 以及 Safari 10+。
（2）clipboard 复印内容的方式有
复制内容主要通过三种方式实现：一是通过 target 指定目标节点；二是通过 Function 动态返回要复制的内容；三是通过 HTML 属性直接返回内容。此处主要介绍后两种操作方式。
（3）Function 操作有两种：
第一种：
通过 target 的 Function 复制内容。指定目标节点，该函数返回节点对象，例如返回值为 'hello' 的 div 元素。
<button class="btn">Copy_target</button>
<div>hello</div>
<script>
var clipboard = new Clipboard('.btn', {
// 通过target指定要复印的节点
target: function() {
return document.querySelector('div');
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>第二种：
通过 text 的 Function 复制内容。直接在函数中返回要复制的字符串，例如返回 'to be or not to be'。
<button class="btn">Copy</button>
<script>
var clipboard = new Clipboard('.btn', {
// 点击copy按钮，直接通过text直接返回复印的内容
text: function() {
return 'to be or not to be';
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});（4）通过属性返回复印的内容
第一种： 单节点
通过 id 获取节点对象并作为参数传递给 Clipboard 实例。此时复制的内容来源于节点的 data-clipboard-text 属性值。
// 通过id获取复制data-clipboard-text的内容
<div id="btn" data-clipboard-text="1">
<span>Copy</span>
</div>
<script>
var btn = document.getElementById('btn');
var clipboard = new Clipboard(btn);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>第二种： 多节点
通过 class 获取所有按钮元素，并作为参数传递给 Clipboard。点击每个按钮时，复制的内容为其对应的 data-clipboard-text 属性值，例如分别为 1、2、3。
// 通过class注册多个button，获取data-clipboard-text的值
<button class="btn" data-clipboard-text="1">Copy</button>
<button class="btn" data-clipboard-text="2">Copy</button>
<button class="btn" data-clipboard-text="3">Copy</button>
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>（5）函数和属性的兼容方式
函数：
//ClipboardJS.isSupported() //--------这句为：是否兼容
var clipboard = new Clipboard('.btn');
//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
clipboard.on('success', function(e) {
alert('复制成功!')
e.clearSelection();
});
clipboard.on('error', function(e) {
alert('请选择“拷贝”进行复制!')
//尝试去掉alert，能弹出系统的“拷贝”工具，但是需要点击两次按钮才能弹出，具体原因还不清楚，参考上图。有人说可以试一下在触发的地方写一个空点击事件, οnclick="" 因为ios不单纯支持on事件
});
属性：
<img
src="../../../../assets/images/zuop_award/copy_link.png"
@click="copy"
data-clipboard-action="copy"
class="email"
:data-clipboard-text="'mayouchen@csdn.com'"
/>
-------------------
copy() {
var clipboard = new Clipboard(".email")
// console.log(clipboard);
clipboard.on("success", e => {
// console.log("复制成功", e);
Toast({
message: "复制成功"
})
// 释放内存
clipboard.destroy()
})
clipboard.on("error", e => {
// 不支持复制
Toast({
message: "手机权限不支持复制功能"
})
console.log("该浏览器不支持自动复制")
// 释放内存
clipboard.destroy()
})
}到此这篇关于clipboard.js使用总结的文章就介绍到这了,更多相关clipboard.js使用内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！