当前位置：首页 > VUE

vue实现点击涟漪

2026-03-08 04:17:42VUE

实现点击涟漪效果的方法

在Vue中实现点击涟漪效果可以通过多种方式完成，以下是几种常见的方法：

使用CSS动画 通过CSS的animation和transform属性可以创建简单的涟漪效果。在Vue模板中添加一个元素，当点击时动态添加类名触发动画。

<template>
  <div class="ripple-container" @click="createRipple">
    <span class="ripple" :class="{ 'animate': isRippling }"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRippling: false
    }
  },
  methods: {
    createRipple() {
      this.isRippling = true
      setTimeout(() => {
        this.isRippling = false
      }, 600)
    }
  }
}
</script>

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

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

.animate {
  animation: ripple 0.6s linear;
}

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

使用第三方库 可以使用现成的Vue涟漪效果库，如vue-ripple-directive或v-ripple，这些库提供了更丰富的配置选项和更好的兼容性。

npm install v-ripple

import Vue from 'vue'
import VRipple from 'v-ripple'

Vue.use(VRipple)

<template>
  <button v-ripple>Click Me</button>
</template>

动态计算涟漪位置 如果需要根据点击位置生成涟漪，可以通过JavaScript动态计算位置并创建元素。

<template>
  <div class="ripple-container" @click="createRipple">
    <slot></slot>
  </div>
</template>

<script>
export default {
  methods: {
    createRipple(event) {
      const container = event.currentTarget
      const ripple = document.createElement('span')
      ripple.classList.add('ripple')
      container.appendChild(ripple)

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

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

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

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

.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

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

自定义指令实现 可以创建自定义Vue指令来实现更灵活的涟漪效果。

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 = `${size}px`
      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);
  transform: scale(0);
  animation: ripple 0.6s linear;
}

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

以上方法可以根据项目需求选择适合的实现方式，CSS动画适合简单场景，而自定义指令或第三方库则提供了更多功能和灵活性。