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>

vue禁止复制

这样的话,既不能选择到我们的文本内容,又不能右键进行选择,可以基本上防止复制了。
ps: 想获取文本的话,可以通过F12审查元素,或者百度快照,哈哈哈

上一篇:Vue页面禁止选择、右键、复制、F12页面审查元素


下一篇:window.returnValue的使用例子