vue禁止复制的方式

 

普通网页禁止复制的功能这里不再叙述，自行学习 https://blog.csdn.net/qq_32963841/article/details/84656752

 

这里简单写一下vue中怎么禁止使用复制

 

　　首先，vue和普通的html页面不太一样。vue的生命周期必须加载完才可以操作dom，生命周期这里不再叙述，自行学习，或者也在mounted和created的时候使用this.$nextTick方法，来使方法在dom生成以后再进行操作。

禁止复制可以通过以下方法，首先是禁止选择，然后就是禁止右键功能，

<template>
  <section class="p-10">
    <div class="app">
      <p> 11111111111111111111111111111111111111111 </p>
    </div>
  </section>
</template>
<script>
  export default {
    created() {
      this.$nextTick(() => {
        // 禁用右键
        document.oncontextmenu = new Function("event.returnValue=false");
        // 禁用选择
        document.onselectstart = new Function("event.returnValue=false");
      });
    }
  };
</script>

 

这样的话，既不能选择到我们的文本内容，又不能右键进行选择，可以基本上防止复制了。

ps： 想获取文本的话，可以通过F12审查元素，或者百度快照，哈哈哈

 

嗯，就酱~