<template>
<div>
<p>剪切板内容:{{ clipboardContent }}</p>
</div>
</template>
<script>
export default {
data() {
return {
clipboardContent: "", // 用于存储剪切板内容
};
},
mounted() {
// 绑定剪切板事件监听器
document.addEventListener("paste", this.handlePaste);
},
beforeDestroy() {
// 组件销毁时解绑剪切板事件监听器,避免内存泄漏
document.removeEventListener("paste", this.handlePaste);
},
methods: {
handlePaste(event) {
// 获取剪切板数据
const clipboardData = event.clipboardData || window.clipboardData;
if (clipboardData) {
// 从剪切板中获取文本内容
const pastedText = clipboardData.getData("text");
// 更新组件中的剪切板内容
this.clipboardContent = pastedText;
// console.log(JSON.stringify(pastedText));
//传值给父组件
this.$emit('change', pastedText);
}
},
},
};
</script>
我把他写成了组件的模式。CV能取到值。 至于传值部分,也可根据自身需求去更改。
注意:前端需要安装 npm install clipboard --save