写入和读取剪切板内容
写入剪切板
使用 clipboard.js 第三方插件：
安装clipboard.js
yarn
yarn add clipboard
npm
npm install clipboard --save
使用示例（vue）
<template>
<div>
<span v-copy>复制这段文本</span>
</div>
</template>
<script>
import ClipboardJS from "clipboard";
export default {
directives: {
copy: {
bind(el, binding, vnode) {
// 获取vue实例
const that = vnode.context;
// 1-监听点击的元素
that.handleCopy(el);
},
}
},
methods: {
handleCopy(element) {
// 2-实例化剪切板对象，指定要复制文本的元素
const clipboard = new ClipboardJS(element, {
/**
* 动态获取要复制的文案
* @param {HTMLElement} trigger 监听点击的元素
* @return {string} 要复制的文案
*/
text: function(trigger) {
return trigger.innerText;
}
});
// 3-结果回调
clipboard.on('success', function(e) {
console.info('e= :', e);
// 清除文字的选中状态
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
},
}
}
</script>
这里使用了vue的自定义指令，
- 指令第一次绑定到元素时，监听元素的点击（复制）事件。
- 点击元素时，执行text函数，并将结果（字符串）写入剪切板。
- 写入成功，执行success回调函数；写入失败，执行error回调函数。
原生API
可以使用原生API：Clipboard.writeText()实现写入剪切板。
var promise = navigator.clipboard.writeText(newClipText)
newClipText：写入的内容
其它API
Clipboard: write()：该方法理论上可以写入任意数据(与writeText()不同，后者只能写入文本)。浏览器通常支持编写文本、HTML和PNG图像数据
读取剪切板
<template>
<div>
<p @click="getClipboard">读取剪切板</p>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
data() {
return {
content: '',
}
},
methods: {
async getClipboard() {
// 读取剪切板
const clipboardContent = await navigator.clipboard.readText();
this.content = clipboardContent;
},
}
}
</script>
使用原生API：Clipboard.readText() 即可。
其它API
Clipboard: read()：该方法理论上可以返回任意数据与readText()不同，后者只能返回文本)。浏览器通常支持读取文本、HTML和PNG图像数据
