禁止复制(vue指令)

1.全局注册方法 

// main.js 或其他全局配置文件中
Vue.directive("disable-copy", {
    // 当绑定元素插入到 DOM 中时...
    inserted: function (el) {
        // 为元素添加事件监听器
        el.addEventListener("copy", preventCopy);
    },
    // 当解绑元素时...
    unbind: function (el) {
        // 移除事件监听器
        el.removeEventListener("copy", preventCopy);
    },
});

function preventCopy(event) {
    event.preventDefault();
    alert("复制功能已被禁用");
}

标签
<p v-disable-copy>禁止复制/p>

2.局部组件注册

// 在组件的 directives 选项中定义指令
export default {
  directives: {
    disableCopy: {
      // 指令的定义
      inserted: function (el) {
        el.addEventListener('copy', preventCopy);
      },
      unbind: function (el) {
        el.removeEventListener('copy', preventCopy);
      }
    }
  }
};

function preventCopy(event) {
  event.preventDefault();
  alert('复制功能已被禁用');
}

标签
<p v-disable-copy >禁止复制</p>