vue-model如何自定义指令，及批量注册自定义指令

yinxiangzhongqing2025-02-16 4:08

一、在Vue.js中，v-model是一个用于在表单输入和应用状态之间创建双向绑定的指令。要编写自定义的v-model指令，你需要使用Vue的自定义指令API。以下是编写自定义v-model指令的步骤：

  1. 定义一个自定义指令对象。
  2. 在指令对象的bind钩子函数中，设置元素的初始值。
  3. 在**inserted**钩子函数中，添加事件监听器来更新数据。
  4. 在componentUpdated钩子函数中，确保当父组件的数据变化时，更新元素的值。
  5. 在unbind钩子函数中，移除事件监听器。

下面是一个示例代码，展示了如何创建一个自定义的v-model指令：

javascript 复制代码 
Vue.directive('custom-model', {
  bind: function(el, binding, vnode) {
    // 初始化元素值
    el.value = binding.value;

    // 定义一个处理函数，用于更新数据
    function handleInput(event) {
      const newValue = event.target.value;
      if (newValue !== binding.value) {
        vnode.context.$emit('input', newValue);
      }
    }

    // 为元素添加事件监听器
    el.addEventListener('input', handleInput);

    // 将处理函数存储在元素的_handleInput属性中，以便后续可以移除监听器
    el._handleInput = handleInput;
  },
  inserted: function(el, binding, vnode) {
    // 可以在这里执行一些额外的操作，例如聚焦输入框等
  },
  update: function(el, binding, vnode) {
    // 确保元素的值与绑定的值同步
    if (binding.value !== el.value) {
      el.value = binding.value;
    }
  },
  unbind: function(el) {
    // 移除事件监听器
    el.removeEventListener('input', el._handleInput);
    delete el._handleInput;
  }
});

在这个示例中，我们创建了一个名为custom-model的自定义指令。这个指令会在绑定的元素上设置一个输入事件监听器，当用户输入时，它会触发一个input事件并更新绑定的数据。同时，当绑定的数据发生变化时，指令的update钩子会确保元素的值也相应地更新。最后，当指令解绑时，我们会移除事件监听器以清理资源。

二、如何批量注册v-model自定义指令

在Vue.js中，如果你需要批量注册多个自定义指令，包括v-model指令，你可以使用一个循环来简化这个过程。以下是一个示例，展示了如何批量注册多个自定义指令，包括自定义的v-model指令：

javascript 复制代码 
// 定义自定义指令对象
const customDirectives = {
  'custom-model': {
    bind: function(el, binding, vnode) {
      el.value = binding.value;
      function handleInput(event) {
        const newValue = event.target.value;
        if (newValue !== binding.value) {
          vnode.context.$emit('input', newValue);
        }
      }
      el.addEventListener('input', handleInput);
      el._handleInput = handleInput;
    },
    inserted: function(el, binding, vnode) {
      // 可以在这里执行一些额外的操作，例如聚焦输入框等
    },
    update: function(el, binding, vnode) {
      if (binding.value !== el.value) {
        el.value = binding.value;
      }
    },
    unbind: function(el) {
      el.removeEventListener('input', el._handleInput);
      delete el._handleInput;
    }
  },
  // 其他自定义指令可以在这里添加
};

// 批量注册自定义指令
Object.keys(customDirectives).forEach(key => {
  Vue.directive(key, customDirectives[key]);
});

在这个示例中，我们首先定义了一个包含所有自定义指令的对象customDirectives。然后，我们使用Object.keys()方法获取这个对象的所有键（即指令名称），并使用forEach循环遍历这些键，调用Vue.directive()方法来注册每个自定义指令。

这样，你就可以轻松地批量注册多个自定义指令，包括自定义的v-model指令。

三、常用自定义指令

1、v-copy

需求：实现一键复制文本内容，用于鼠标右键黏贴

思路：

  1. 创建自定义指令 ：在Vue实例中定义一个自定义指令 v-copy。
  2. 使用Clipboard API ：利用现代浏览器提供的 navigator.clipboard.writeText() 方法来实现复制功能。
  3. 处理右键事件：监听元素的右键事件，并触发复制操作。
  4. 回退机制 ：如果 navigator.clipboard 不可用，可以使用传统的DOM操作方式作为回退方案。

实现代码如下：

javascript 复制代码 
// main.js or where you define your Vue instance
import Vue from 'vue';

Vue.directive('copy', {
  bind(el, binding) {
    const textToCopy = binding.value;

    // Function to handle the copy action
    function handleCopy() {
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(textToCopy).then(() => {
          console.log('复制成功！');
        }).catch((err) => {
          console.error('复制失败:', err);
          fallbackCopyTextToClipboard(textToCopy);
        });
      } else {
        fallbackCopyTextToClipboard(textToCopy);
      }
    }

    // Fallback method for older browsers
    function fallbackCopyTextToClipboard(text) {
      const textArea = document.createElement('textarea');
      textArea.value = text;
      textArea.style.position = 'fixed'; // Prevent scrolling to bottom of page in MS Edge.
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      try {
        document.execCommand('copy');
        console.log('复制成功！');
      } catch (err) {
        console.error('复制失败:', err);
      }
      document.body.removeChild(textArea);
    }

    // Add event listener for right-click context menu
    el.addEventListener('contextmenu', (event) => {
      event.preventDefault(); // Prevent default context menu
      handleCopy();
    });
  }
});

// In your Vue component template
<template>
  <div v-copy="'要复制的文本内容'">点击右键复制这段文本</div>
</template>
  1. 自定义指令绑定 ：在 bind 钩子中，我们获取到需要复制的文本内容 binding.value。
  2. 处理复制逻辑 ：
    • 如果浏览器支持 navigator.clipboard 并且当前页面是在安全上下文（HTTPS）下运行，则使用 navigator.clipboard.writeText 方法进行复制。
    • 如果不支持或发生错误，则调用 fallbackCopyTextToClipboard 函数，该函数使用传统的方法创建一个隐藏的 <textarea> 元素来执行复制操作。
  3. 右键事件监听 ：通过监听 contextmenu 事件，阻止默认的右键菜单弹出，并调用 handleCopy 函数执行复制操作。
  4. 回退机制 ：在 fallbackCopyTextToClipboard 函数中，创建一个隐藏的 <textarea> 元素，将文本内容放入其中，选中并执行复制命令，最后移除该元素。

这样，你就可以在Vue组件中使用 v-copy 自定义指令，实现一键复制文本内容的功能，并在鼠标右键时触发复制操作。

2、拖拽自定义指令

需求：实现一个拖拽指令，可在页面可视区域任意拖拽元素

javascript 复制代码 
export default {
  inserted(el) {
    let disX, disY;
    const oDiv = el;

    const onMouseDown = (e) => {
      // 防止默认行为（如选中文本）
      e.preventDefault();

      // 计算鼠标相对元素的位置
      disX = e.clientX - oDiv.offsetLeft;
      disY = e.clientY - oDiv.offsetTop;

      // 绑定移动和结束事件
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    };

    const onMouseMove = (e) => {
      // 计算新的位置
      let left = e.clientX - disX;
      let top = e.clientY - disY;

      // 获取视口尺寸
      const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

      // 获取元素尺寸
      const elWidth = oDiv.offsetWidth;
      const elHeight = oDiv.offsetHeight;

      // 限制元素不超出视口
      left = Math.max(0, Math.min(left, viewportWidth - elWidth));
      top = Math.max(0, Math.min(top, viewportHeight - elHeight));

      // 设置元素位置
      oDiv.style.left = `${left}px`;
      oDiv.style.top = `${top}px`;
    };

    const onMouseUp = () => {
      // 移除事件监听器
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };

    // 绑定鼠标按下事件
    oDiv.addEventListener('mousedown', onMouseDown);

    // 可选：添加触摸事件支持
    const onTouchStart = (e) => {
      if (e.touches.length !== 1) return; // 只处理单点触控
      const touch = e.touches[0];
      disX = touch.clientX - oDiv.offsetLeft;
      disY = touch.clientY - oDiv.offsetTop;
      document.addEventListener('touchmove', onTouchMove);
      document.addEventListener('touchend', onTouchEnd);
    };

    const onTouchMove = (e) => {
      if (e.touches.length !== 1) return;
      const touch = e.touches[0];
      let left = touch.clientX - disX;
      let top = touch.clientY - disY;

      const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
      const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
      const elWidth = oDiv.offsetWidth;
      const elHeight = oDiv.offsetHeight;

      left = Math.max(0, Math.min(left, viewportWidth - elWidth));
      top = Math.max(0, Math.min(top, viewportHeight - elHeight));

      oDiv.style.left = `${left}px`;
      oDiv.style.top = `${top}px`;
    };

    const onTouchEnd = () => {
      document.removeEventListener('touchmove', onTouchMove);
      document.removeEventListener('touchend', onTouchEnd);
    };

    oDiv.addEventListener('touchstart', onTouchStart);
  },
  unbind(el) {
    // 移除所有事件监听器
    el.removeEventListener('mousedown', this.onMouseDown);
    el.removeEventListener('touchstart', this.onTouchStart);
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
    document.removeEventListener('touchmove', this.onTouchMove);
    document.removeEventListener('touchend', this.onTouchEnd);
  }
};

  1. 事件绑定和解绑:

    • 将 mousedown、mousemove、mouseup、touchstart、touchmove 和 touchend 事件绑定到目标元素本身，而不是全局 document。这避免了多个可拖拽元素之间的事件冲突，并提高了性能。
    • 在 unbind 钩子中，确保移除所有添加的事件监听器，防止内存泄漏。

  2. 边界检查:

    • 在 onMouseMove 和 onTouchMove 函数中，计算元素的新位置时，加入了对视口尺寸的检查，确保元素不会拖出视窗范围。

  3. 触摸设备支持:

    • 添加了对触摸事件的处理，使指令在移动设备上也能正常工作。

  4. 代码现代化:

    • 使用了 ES6+ 的箭头函数和模板字符串，使代码更加简洁易读。
    • 使用 addEventListener 和 removeEventListener 代替直接赋值事件处理器，增强了代码的可维护性和可读性。

  5. 防止默认行为:

    • 在 onMouseDown 中调用 e.preventDefault()，防止在拖拽过程中出现意外的默认行为（如文本选择）。

  6. 性能优化:

    • 通过将事件监听器绑定到具体元素，减少了不必要的事件冒泡和捕获，提升了性能。

  7. 样式控制:

    • 通过计算并设置 left 和 top 样式，而不是直接修改 style 属性，避免了与其他 CSS 规则的潜在冲突。使用示例
    javascript 复制代码 
    <template>
  <div v-drags class="draggable">拖拽我</div>
</template>

<script>
import drags from '@/directive/drag'; // 根据实际路径调整

export default {
  directives: {
    drags
  }
};
</script>

<style scoped>
.draggable {
  position: absolute; /* 确保元素是绝对定位 */
  width: 100px;
  height: 100px;
  background-color: lightblue;
  cursor: grab;
}
</style>
相关推荐
JinSo3 小时前
我的2025年度总结：EasyEditor
前端·程序员
喝拿铁写前端7 小时前
前端开发者使用 AI 的能力层级——从表面使用到工程化能力的真正分水岭
前端·人工智能·程序员
wuhen_n8 小时前
LeetCode -- 15. 三数之和（中等）
前端·javascript·算法·leetcode
七月shi人8 小时前
AI浪潮下，前端路在何方
前端·人工智能·ai编程
非凡ghost8 小时前
MusicPlayer2(本地音乐播放器)
前端·windows·学习·软件需求
脾气有点小暴8 小时前
scroll-view分页加载
前端·javascript·uni-app
beckyye9 小时前
ant design vue Table根据数据合并单元格
前端·antd
布列瑟农的星空9 小时前
还在手动翻译国际化词条？AST解析+AI翻译实现一键替换
前端·后端·ai编程
土豆12509 小时前
Rust 错误处理完全指南：从入门到精通
前端·rust·编程语言
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击03电脑检测软件—图吧工具箱04Linux下V2Ray安装配置指南05Web安全中SQL注入绕过WAF的具体手法和实战案例063D 圣诞树网页代码07UV安装并设置国内源08jdk21下载、安装（Windows、Linux、macOS）09SQLmap 完整使用指南：环境搭建 + 命令详解 + 实操案例10BongoCat - 跨平台键盘猫动画工具