vue自定义指令实现禁止复制功能

— Posted in编程 — 1 min read

原理

设置元素oncontextmenu与onselectstart事件直接返回

注册自定义指令blockcopy

import Vue form 'vue'

Vue.directive('watermark', {
  bind: function (el) {
    el.oncontextmenu = () => {
      return false;
    };
    el.onselectstart = () => {
      return false;
    };
  }
}
JavaScript

引入blockcopy.js文件

import 'blockcopy.js'
JavaScript

使用blockcopy指令

<span role="button" tabindex="0" data-code="<template> <div v-blockcopy ></div> 
<template>
    <div v-blockcopy ></div>
</template>
Vue HTML

Comment