vue实现点击涟漪

Vue 实现点击涟漪效果

实现点击涟漪效果可以通过 CSS 和 Vue 的事件绑定结合完成。以下是两种常见的实现方式：

使用纯 CSS 和 Vue 事件

通过动态添加涟漪元素并利用 CSS 动画实现效果。

<template>
  <div class="ripple-container" @click="createRipple">
    <slot></slot>
    <span class="ripple" :style="rippleStyle"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rippleStyle: {}
    }
  },
  methods: {
    createRipple(e) {
      const container = e.currentTarget
      const circle = document.createElement('span')
      const diameter = Math.max(container.clientWidth, container.clientHeight)
      const radius = diameter / 2

      this.rippleStyle = {
        width: `${diameter}px`,
        height: `${diameter}px`,
        left: `${e.clientX - container.getBoundingClientRect().left - radius}px`,
        top: `${e.clientY - container.getBoundingClientRect().top - radius}px`
      }

      setTimeout(() => {
        this.rippleStyle = {}
      }, 600)
    }
  }
}
</script>

<style>
.ripple-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
</style>

使用第三方库

可以使用现成的 Vue 涟漪效果库，如 vue-ripple-directive：

安装：

npm install vue-ripple-directive

使用：

import Vue from 'vue'
import Ripple from 'vue-ripple-directive'

Vue.directive('ripple', Ripple)

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

自定义指令实现

创建自定义 Vue 指令实现更灵活的涟漪效果：

Vue.directive('ripple', {
  inserted(el) {
    el.style.position = 'relative'
    el.style.overflow = 'hidden'

    el.addEventListener('click', (e) => {
      const ripple = document.createElement('div')
      ripple.className = 'ripple-effect'

      const rect = el.getBoundingClientRect()
      const size = Math.max(rect.width, rect.height)
      const x = e.clientX - rect.left - size/2
      const y = e.clientY - rect.top - size/2

      ripple.style.width = ripple.style.height = `${size}px`
      ripple.style.left = `${x}px`
      ripple.style.top = `${y}px`

      el.appendChild(ripple)

      setTimeout(() => {
        ripple.remove()
      }, 600)
    })
  }
})

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  animation: ripple 600ms linear;
  transform: scale(0);
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

这些方法提供了不同复杂度的实现方案，可以根据项目需求选择最适合的方式。纯 CSS 方案轻量但功能有限，自定义指令方案更灵活，第三方库则提供了开箱即用的解决方案。