javascript - 如何防止 vue.js 中的复制粘贴

Question

为了让内容窃贼为难，我想在 vue.js 组件上禁用渲染文本的复制粘贴。

这是一个示例模板:

<template>
  <div id="my-precious-content">
    <div class="container"> 
      <div> Some {{texts}} come here </div>
      <div> Still {{moreTexts}} here </div>
    </div>
  </div>
</template> 

我想知道如何实现这一目标？

Answer 1

道德观点:你不应该。它破坏了普通用户的用户体验。他们无法复制内容并将其翻译成另一种语言，无法复制链接等等。

简短回答:你不能。

长答案:你可以让它变得更难一点，但他们仍然能够复制它(除非你将其转换为图像)。防止复制的最简单方法是防止选择文本，您可以使用这样的 css 来做到这一点:

.container {
    -webkit-user-select: none;  
    -moz-user-select: none;  
    -ms-user-select: none;  
    -o-user-select: none;  
    user-select: none;
}

<小时/>

另一种方法您可以使用 oncopy event ，但它不是标准的，并且 mdn web 文档不推荐用于生产，所以我会坚持使用 css 解决方案。