vue实现水波涟漪效果的点击反馈指令

Vue 是一个流行的现代 JavaScript 框架，它提供了丰富的动画和效果特性，其中之一就是在用户点击元素时显示水波涟漪效果。本攻略将介绍如何在 Vue 中实现这一效果。

步骤一：安装依赖

要实现水波涟漪效果，我们需要使用一个名为 Vuetify 的 UI 框架，它已经包含了这一特性。因此，安装 Vuetify 是必要的。

首先，我们需要安装 Vuetify：

npm install vuetify

在 main.js 文件中添加以下内容：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

步骤二：创建指令

接下来，我们需要创建一个全局的 Vue 指令。指令是一个带有一些钩子函数的指令，这些函数会被调用，以响应绑定到指令上的 DOM 元素的变化。

在新建的一个 javascript 模块中添加以下代码：

export default {
  bind: function(el){
    el.addEventListener('click', function() {
      const ripple = document.createElement('div')
      ripple.className = 'ripple'
      el.appendChild(ripple)
      const size = Math.max(el.offsetWidth, el.offsetHeight)
      const pos = el.getBoundingClientRect()
      const x = event.clientX - pos.left - (size / 2)
      const y = event.clientY - pos.top - (size / 2)
      ripple.style.cssText = `width: ${size}px;height: ${size}px;left: ${x}px;top: ${y}px;`
      setTimeout(() => {
        el.removeChild(ripple)
      }, 500)
    }, false)
  }
}

我们为 DOM 元素添加了一个 click 监听器。当元素被点击时，我们创建一个带有类名为“ripple”的 div 元素，然后在当前元素中添加它。我们计算出水波纹的尺寸和位置后，将 CSS 样式应用到水波纹，然后调用 setTimeout 函数，以便让水波纹消失。

步骤三：指令注册

在 App.vue 组件中添加以下代码：

<template>
  <button v-ripple>Click me!</button>
</template>

<script>
import RippleDirective from './RippleDirective';

export default {
  name: 'App',
  directives: {
    Ripple: RippleDirective
  }
}
</script>

我们可以看到，我们在模版中使用了自定义的 v-ripple 指令，并且我们通过导入指令的源代码并进行全局注册，使它能在组件中使用。

示例展示

我们可以在一个按钮上使用 v-ripple 指令：

<template>
  <button v-ripple>Click me!</button>
</template>

我们也可以添加水波效果到任何其它 DOM 元素：

<template>
  <div v-ripple>Click me!</div>
</template>

我们还可以调整水波效果的样式，比如控制透明度、颜色等：

<style>
.ripple {
  background-color: blue;
  opacity: 0.5;
}
</style>

<template>
  <button class="custom-btn" v-ripple>Click me!</button>
</template>