关于clipboard.js 的使用，完成文本的复制
朱炜
clipboard.js 主要用来对节点内的文本完成复制。支持原生js的调用
官网：https://clipboardjs.com/
官方js:https://clipboardjs.com/dist/clipboard.min.js
| data-clipboard-action | cut | 剪切 |
| copy | 复制 | |
| data-clipboard-target | 类名/id名 | 要复制的节点 |
| data-clipboard-text | 文本内容 | 要复制的文本内容 |
1. js调用
虽然是用的原生js，但是类名传递依然可以使用“.btn”这种方式，id名同理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="copy">copy</div>
<a onclick="getCopy()" class="btn" data-clipboard-target="#copy">button</a>
<script>
function getCopy() {
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
//e.clearSelection(); //注释可实现复制成功后，文本获得焦点
clipboard.destroy()
});
clipboard.on('error', function (e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
clipboard.destroy()
});
}
</script>
<script src="./clipboard.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>2. jquery同理
3. vue调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.global.prod.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div id="copy">copy</div>
<a @click="getCopy()" class="btn" data-clipboard-target="#copy">button</a>
</div>
<script src="./clipboard.min.js" type="text/javascript" charset="utf-8"></script>
<script>
Vue.createApp({
methods: {
getCopy() {
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
//e.clearSelection();
clipboard.destroy()
});
clipboard.on('error', function (e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
clipboard.destroy()
});
}
}
}).mount("#app")
</script>
</body>
</html>问题：
1. 点击多次时，复制功能重复调用多次
这是因为调用后没有销毁实例，需要再调用clipboard.destory()销毁实例
2. vue首次点击时需要点击两次才能复制成功
类似资料：