【vue】自定义指令实现 复制、长按、水印 功能

---

前言

在 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里引入的注释掉就好，注意：要注释两个地方！

下班~