vue禁止复制的方式

这里简单写一下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>

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容