在 Vue 开发中，为了提升用户交互体验，常常需要实现一些有趣的特效，比如点击水波纹效果。本文将向您展示如何仅用 20 行 Vue 代码来实现点击水波纹效果的自定义指令。

我们需要了解 Vue 自定义指令的基本概念。自定义指令允许我们在普通的 DOM 元素上添加特殊的行为和功能。

以下是实现点击水波纹效果的关键代码：

Vue.directive('ripple', {
  bind: function (el, binding) {
    el.addEventListener('click', function (e) {
      const div = document.createElement('div');
      div.classList.add('ripple-effect');
      const diameter = Math.max(el.offsetWidth, el.offsetHeight);
      const radius = diameter / 2;
      const x = e.offsetX - radius;
      const y = e.offsetY - radius;

      div.style.width = diameter + 'px';
      div.style.height = diameter + 'px';
      div.style.left = x + 'px';
      div.style.top = y + 'px';

      el.appendChild(div);

      setTimeout(() => {
        el.removeChild(div);
      }, 500);
    });
  }
});

在上述代码中，我们创建了一个名为 ripple 的自定义指令。在 bind 钩子函数中，为元素添加了点击事件监听器。当点击发生时，创建一个带有特定样式的 div 元素来模拟水波纹效果，并通过计算坐标和尺寸来确保水波纹的位置和大小合适。最后，使用 setTimeout 在 500 毫秒后移除这个水波纹元素，以实现短暂的显示效果。

为了应用这个自定义指令，只需要在模板中像这样使用：

<button v-ripple>点击我</button>

通过这简单的 20 行代码，我们成功地为 Vue 应用添加了一个吸引人的点击水波纹效果，增强了用户与界面的互动性和视觉体验。

这种轻量级的自定义指令不仅易于实现和理解，还能在各种 Vue 项目中灵活运用，为页面增添更多的活力和魅力。

无论是构建复杂的 Web 应用还是简单的交互界面，这样的小技巧都能让您的 Vue 开发更加出色，为用户带来更加愉悦的使用感受。