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

文章目录

  • 前言
  • 一、新建文件夹
  • 二、新建文件
        • directives -> index.js
      • 1、v-copy
            • copy.js
            • v-copy 复制 使用
      • 2、v-longpress
            • longpress.js
            • v-longpress 长按 使用
      • 3、vue-waterMarker
            • waterMarker.js
            • v-waterMarker 水印 使用
            • 水印效果图
  • 总结


前言

在 vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。


提示:以下是本篇文章正文内容,下面案例可供参考

一、新建文件夹

在开始之前先把目录结构梳理一下,新建目录 directives 用于存放 自定义指令,其中

  • index.js 为directives的主文件,全局注册的也是它
  • copy.js 用于 实现 复制
  • longpress.js 用于 实现 长按
  • waterMarker.js 用于 实现 水印功能

目录结构截图

【vue】自定义指令实现 复制、长按、水印 功能_第1张图片

二、新建文件

在上述步骤新建完目录后,开始按照目录结构 新建 具体的文件,首先

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>
水印效果图

【vue】自定义指令实现 复制、长按、水印 功能_第2张图片


总结

需用使用的指令按需引入,不需要的把index.js里引入的注释掉就好,注意:要注释两个地方!

下班~

你可能感兴趣的:(vue.js,javascript,前端)