如何防止在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解決方案。