前言
在 vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。
Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。
提示：以下是本篇文章正文内容，下面案例可供参考
一、新建文件夹
在开始之前先把目录结构梳理一下，新建目录 directives 用于存放 自定义指令，其中
- index.js 为directives的主文件，全局注册的也是它
- copy.js 用于 实现 复制
- longpress.js 用于 实现 长按
- waterMarker.js 用于 实现 水印功能
目录结构截图
二、新建文件
在上述步骤新建完目录后，开始按照目录结构 新建 具体的文件，首先
directives -> index.js
import copy from "./copy"; import longpress from "./longpress"; import waterMarker from "./waterMarker"; // 自定义指令 const directives = { copy, longpress, waterMarker, }; export default { install(Vue) { Object.keys(directives).forEach((key) => { Vue.directive(key, directives[key]); }); }, };
1、v-copy
需求：
实现一键复制文本内容，用于鼠标右键粘贴。
思路：
- 动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域
- 将要复制的值赋给 textarea 标签的 value 属性，并插入到 body
- 选中值 textarea 并复制
- 将 body 中插入的 textarea 移除
- 在第一次调用时绑定事件，在解绑时移除事件
copy.js
const copy = { bind(el, { value }) { el.$value = value; el.handler = () => { if (!el.$value) { // 值为空的时候，给出提示。可根据项目UI仔细设计 console.log("无复制内容"); return; } // 动态创建 textarea 标签 const textarea = document.createElement("textarea"); // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域 textarea.readOnly = "readonly"; textarea.style.position = "absolute"; textarea.style.left = "-9999px"; // 将要 copy 的值赋给 textarea 标签的 value 属性 textarea.value = el.$value; // 将 textarea 插入到 body 中 document.body.appendChild(textarea); // 选中值并复制 textarea.select(); const result = document.execCommand("Copy"); if (result) { console.log("复制成功"); // 可根据项目UI仔细设计 } document.body.removeChild(textarea); }; // 绑定点击事件，就是所谓的一键 copy 啦 el.addEventListener("click", el.handler); }, // 当传进来的值更新的时候触发 componentUpdated(el, { value }) { el.$value = value; }, // 指令与元素解绑的时候，移除事件绑定 unbind(el) { el.removeEventListener("click", el.handler); }, }; export default copy;
v-copy 复制 使用
vue单文件
<template> <button v-copy="copyText">复制</button> </template> <script> export default { data() { return { copyText: 'a copy directives', } }, } </script>
2、v-longpress
需求：
实现长按，用户需要按下并按住按钮几秒钟，触发相应的事件
思路：
- 创建一个计时器， 2 秒后执行函数
- 当用户按下按钮时触发 mousedown 事件，启动计时器；用户松开按钮时调用 mouseout 事件。
- 如果 mouseup 事件 2 秒内被触发，就清除计时器，当作一个普通的点击事件
- 如果计时器没有在 2 秒内清除，则判定为一次长按，可以执行关联的函数。
- 在移动端要考虑 touchstart，touchend 事件
longpress.js
const longpress = { bind: function (el, binding, vNode) { if (typeof binding.value !== "function") { throw "callback must be a function"; } // 定义变量 let pressTimer = null; // 创建计时器（ 2秒后执行函数 ） let start = (e) => { if (e.type === "click" && e.button !== 0) { return; } if (pressTimer === null) { pressTimer = setTimeout(() => { handler(); }, 2000); } }; // 取消计时器 let cancel = (e) => { if (pressTimer !== null) { clearTimeout(pressTimer); pressTimer = null; } }; // 运行函数 const handler = (e) => { binding.value(e); }; // 添加事件监听器 el.addEventListener("mousedown", start); el.addEventListener("touchstart", start); // 取消计时器 el.addEventListener("click", cancel); el.addEventListener("mouseout", cancel); el.addEventListener("touchend", cancel); el.addEventListener("touchcancel", cancel); }, // 当传进来的值更新的时候触发 componentUpdated(el, { value }) { el.$value = value; }, // 指令与元素解绑的时候，移除事件绑定 unbind(el) { el.removeEventListener("click", el.handler); }, }; export default longpress;
v-longpress 长按 使用
vue单文件
<template> <button v-longpress="longpress">长按</button> </template> <script> export default { methods: { longpress () { alert('长按指令生效') } } } </script>
3、vue-waterMarker
需求：给整个页面添加背景水印
思路：
- 使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。
- 将其设置为背景图片，从而实现页面或组件水印效果
waterMarker.js
function addWaterMarker(str, parentNode, font, textColor) { // 水印文字，父元素，字体，文字颜色 var can = document.createElement("canvas"); parentNode.appendChild(can); can.width = 200; can.height = 150; can.style.display = "none"; var cans = can.getContext("2d"); cans.rotate((-20 * Math.PI) / 180); cans.font = font || "16px Microsoft JhengHei"; cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)"; cans.textAlign = "left"; cans.textBaseline = "Middle"; cans.fillText(str, can.width / 10, can.height / 2); parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")"; } const waterMarker = { bind: function (el, binding) { addWaterMarker( binding.value.text, el, binding.value.font, binding.value.textColor ); }, }; export default waterMarker;
v-waterMarker 水印 使用
vue单文件
<template> <div v-waterMarker="{text:'amoureux555版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div> </template> <style scoped> div{ height: 800px; } </style>
水印效果图
总结
需用使用的指令按需引入，不需要的把index.js里引入的注释掉就好，注意：要注释两个地方！
下班~
