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

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

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

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

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指令：

// 定义自定义指令对象 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

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

思路：

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

实现代码如下：

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

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

2、拖拽自定义指令

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

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); } };

事件绑定和解绑:

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

边界检查:

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

触摸设备支持:

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

代码现代化:

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

防止默认行为:

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

性能优化:

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

样式控制:

通过计算并设置 left 和 top 样式，而不是直接修改 style 属性，避免了与其他 CSS 规则的潜在冲突。使用示例 <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>