推荐15个 Vue 常用自定义指令，含实现原理与使用方式

前言

Vue.js 是一个流行的前端框架，它的核心理念是通过指令（Directives）来扩展 HTML 的能力。尽管 Vue.js 已经内置了一些非常实用的指令（比如 v-if, v-show, v-for 等），但有时候我们还是需要创建自定义指令来满足特定的需求。今天我们就来聊聊 Vue 常用的自定义指令，它们能让你的代码更加简洁和高效。

常用自定义指令

1. v-focus：自动聚焦输入框

如果你希望在页面加载时，某个输入框自动获得焦点，可以创建一个 v-focus 指令。这个指令可以帮你省掉在 mounted 钩子里写 DOM 操作的麻烦。

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中时
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
});

使用方法：

<input v-focus>

2. v-color：动态改变元素颜色

有时候我们需要根据某些条件动态改变某个元素的颜色，v-color 指令就派上用场了。

// 注册一个全局自定义指令 v-color
Vue.directive('color', {
  // 当绑定元素插入到 DOM 中时
  bind: function (el, binding) {
    el.style.color = binding.value;
  }
});

使用方法：

<div v-color="'red'">这段文字将会是红色的</div>

3. v-debounce：防抖输入

在处理用户输入时，你可能希望减少输入触发的事件次数（比如搜索输入框），使用 v-debounce 指令可以轻松实现防抖功能。

Vue.directive('debounce', {
  bind: function (el, binding) {
    let timeout;
    el.addEventListener('input', () => {
      if (timeout) clearTimeout(timeout);
      timeout = setTimeout(() => {
        binding.value(el.value);
      }, 500); // 延迟时间可以根据需要调整
    });
  }
});

使用方法：

<input v-debounce="handleInput">

在你的 Vue 组件中：

methods: {
  handleInput(value) {
    console.log(value);
  }
}

4. v-scroll：监听滚动事件

有时候我们需要在页面滚动时执行一些操作，比如加载更多数据或改变导航栏样式，可以使用 v-scroll 指令。

Vue.directive('scroll', {
  inserted: function (el, binding) {
    window.addEventListener('scroll', () => {
      binding.value(window.scrollY);
    });
  }
});

使用方法：

<div v-scroll="handleScroll">内容</div>

在你的 Vue 组件中：

methods: {
  handleScroll(scrollY) {
    console.log('滚动位置:', scrollY);
  }
}

5. v-resize：监听窗口大小变化

有时候我们需要动态调整元素的布局或样式以适应窗口的大小变化，v-resize 指令可以帮助我们简化这一操作。

Vue.directive('resize', {
  bind(el, binding) {
    const onResize = () => binding.value(el);
    window.addEventListener('resize', onResize);
    // 在元素卸载时移除事件监听器
    el._onResize = onResize;
  },
  unbind(el) {
    window.removeEventListener('resize', el._onResize);
  }
});

使用方法：

<div v-resize="handleResize">内容</div>

在你的 Vue 组件中：

methods: {
  handleResize(el) {
    console.log('元素尺寸:', el.clientWidth, el.clientHeight);
  }
}

6. v-lazyload：图片懒加载

懒加载是一种优化网页加载性能的技术，当用户滚动到图片所在位置时再加载图片，从而减少初始页面加载的资源消耗。我们可以创建一个 v-lazyload 指令来实现图片懒加载。

Vue.directive('lazyload', {
  bind(el, binding) {
    const loadImage = () => {
      const rect = el.getBoundingClientRect();
      if (rect.top < window.innerHeight && rect.bottom > 0) {
        el.src = binding.value;
        window.removeEventListener('scroll', loadImage);
      }
    };
    window.addEventListener('scroll', loadImage);
    loadImage(); // 立即执行一次，以防图片已在视口内
  },
  unbind() {
    window.removeEventListener('scroll', loadImage);
  }
});

使用方法：

<img v-lazyload="'path/to/image.jpg'" alt="图片描述">

7. v-clipboard：复制到剪贴板

为了在网页上提供一键复制文本到剪贴板的功能，我们可以创建一个 v-clipboard 指令。

Vue.directive('clipboard', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      const textarea = document.createElement('textarea');
      textarea.value = binding.value;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      alert('复制成功!');
    });
  }
});

使用方法：

<button v-clipboard="'要复制的文本'">点击复制</button>

8. v-tooltip：简易提示框

有时候我们需要在鼠标悬停在某个元素上时显示一个提示框，这时可以用 v-tooltip 指令来实现。

Vue.directive('tooltip', {
  bind(el, binding) {
    const tooltip = document.createElement('div');
    tooltip.className = 'tooltip';
    tooltip.innerText = binding.value;
    tooltip.style.position = 'absolute';
    tooltip.style.backgroundColor = '#333';
    tooltip.style.color = '#fff';
    tooltip.style.padding = '5px 10px';
    tooltip.style.borderRadius = '4px';
    tooltip.style.display = 'none';
    document.body.appendChild(tooltip);

    el.addEventListener('mouseenter', () => {
      tooltip.style.display = 'block';
      const rect = el.getBoundingClientRect();
      tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight}px`;
      tooltip.style.left = `${rect.left + window.scrollX}px`;
    });

    el.addEventListener('mouseleave', () => {
      tooltip.style.display = 'none';
    });
  },
  unbind(el) {
    el.removeEventListener('mouseenter');
    el.removeEventListener('mouseleave');
  }
});

使用方法：

<button v-tooltip="'这里是提示信息'">鼠标悬停显示提示</button>

9. v-permission：权限控制

在应用权限管理中，我们可能需要根据用户权限动态显示或隐藏某些内容，这时可以使用 v-permission 指令。

Vue.directive('permission', {
  bind(el, binding, vnode) {
    const userPermissions = vnode.context.$store.state.userPermissions; // 假设从 Vuex store 中获取用户权限
    if (!userPermissions.includes(binding.value)) {
      el.style.display = 'none';
    }
  }
});

使用方法：

<button v-permission="'admin'">仅管理员可见的按钮</button>

10. v-draggable：拖拽元素

为了让某些元素可以被拖拽，我们可以创建一个 v-draggable 指令。

Vue.directive('draggable', {
  bind(el) {
    el.style.position = 'absolute';
    el.onmousedown = function (e) {
      const disX = e.clientX - el.offsetLeft;
      const disY = e.clientY - el.offsetTop;
      document.onmousemove = function (e) {
        el.style.left = `${e.clientX - disX}px`;
        el.style.top = `${e.clientY - disY}px`;
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
});

使用方法：

<div v-draggable style="width: 100px; height: 100px; background-color: red;"></div>

11. v-longpress：长按事件

有时候我们希望在用户长按某个元素时触发特定的操作，比如弹出菜单或执行某个命令，这时可以使用 v-longpress 指令。

Vue.directive('longpress', {
  bind(el, binding) {
    let pressTimer = null;
    const handler = (e) => {
      binding.value(e);
    };
    const start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return;
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler(e);
        }, 1000); // 长按时间为1秒，可以根据需求调整
      }
    };
    const cancel = () => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer);
        pressTimer = null;
      }
    };
    el.addEventListener('mousedown', start);
    el.addEventListener('touchstart', start);
    el.addEventListener('click', cancel);
    el.addEventListener('mouseout', cancel);
    el.addEventListener('touchend', cancel);
    el.addEventListener('touchcancel', cancel);
  },
  unbind(el) {
    el.removeEventListener('mousedown', start);
    el.removeEventListener('touchstart', start);
    el.removeEventListener('click', cancel);
    el.removeEventListener('mouseout', cancel);
    el.removeEventListener('touchend', cancel);
    el.removeEventListener('touchcancel', cancel);
  }
});

使用方法：

<button v-longpress="handleLongPress">长按我</button>

在你的 Vue 组件中：

methods: {
  handleLongPress() {
    alert('长按事件触发');
  }
}

12. v-autosize：自动调整文本域大小

为了让文本域（textarea）根据输入内容自动调整高度，可以使用 v-autosize 指令。

Vue.directive('autosize', {
  bind(el) {
    el.style.resize = 'none';
    const adjustHeight = () => {
      el.style.height = 'auto';
      el.style.height = `${el.scrollHeight}px`;
    };
    el.addEventListener('input', adjustHeight);
    adjustHeight(); // 初始化时调整一次高度
  },
  unbind(el) {
    el.removeEventListener('input', adjustHeight);
  }
});

使用方法：

<textarea v-autosize></textarea>

13. v-hover: 悬停样式切换

我们可以使用 v-hover 指令来在鼠标悬停时切换元素的样式。

Vue.directive('hover', {
  bind(el, binding) {
    const enter = () => {
      el.style.backgroundColor = binding.value.enter || 'yellow';
    };
    const leave = () => {
      el.style.backgroundColor = binding.value.leave || '';
    };
    el.addEventListener('mouseenter', enter);
    el.addEventListener('mouseleave', leave);
  },
  unbind(el) {
    el.removeEventListener('mouseenter', enter);
    el.removeEventListener('mouseleave', leave);
  }
});

使用方法：

<div v-hover="{ enter: 'lightblue', leave: 'white' }">鼠标悬停我试试！</div>

14. v-infinite-scroll：无限滚动加载

在做分页加载时，常常会用到无限滚动加载，可以使用 v-infinite-scroll 指令来实现这一功能。

Vue.directive('infinite-scroll', {
  bind(el, binding) {
    const options = {
      root: el,
      rootMargin: '0px',
      threshold: 1.0
    };

    const callback = (entries) => {
      if (entries[0].isIntersecting) {
        binding.value();
      }
    };

    const observer = new IntersectionObserver(callback, options);
    observer.observe(el.lastElementChild);

    el._observer = observer;
  },
  unbind(el) {
    if (el._observer) {
      el._observer.disconnect();
      delete el._observer;
    }
  }
});

使用方法：

<div v-infinite-scroll="loadMore">
  <div v-for="item in items" :key="item.id">{{ item.name }}</div>
</div>

在你的 Vue 组件中：

methods: {
  loadMore() {
    // 加载更多数据的逻辑
  }
}

15. v-highlight：文本高亮

为了在页面上高亮显示某些特定的文本，可以使用 v-highlight 指令。

Vue.directive('highlight', {
  bind(el, binding) {
    const text = el.innerHTML;
    const query = binding.value;
    const highlightedText = text.replace(new RegExp(`(${query})`, 'gi'), '<span class="highlight">$1</span>');
    el.innerHTML = highlightedText;
  }
});

使用方法：

<div v-highlight="'关键字'">这里包含一些关键字文本内容</div>

在 CSS 文件中定义高亮样式：

.highlight {
  background-color: yellow;
}

总结

通过自定义指令，我们可以更加灵活地操控 DOM 元素，并简化代码逻辑，提高开发效率。上述的 15 个自定义指令示例覆盖了开发中常见的需求，从自动聚焦、颜色变更、懒加载、复制到剪贴板、到无限滚动加载和文本高亮等。