当前位置：首页 > VUE

vue实现点击涟漪

2026-01-15 01:33:14VUE

Vue 实现点击涟漪效果

在 Vue 中实现点击涟漪效果可以通过自定义指令或组件的方式完成。以下是两种常见实现方法：

使用自定义指令

创建一个自定义指令 v-ripple，动态生成涟漪元素并添加动画效果：

// 在 main.js 或单独指令文件中
Vue.directive('ripple', {
  bind(el, binding) {
    el.style.position = 'relative'
    el.style.overflow = 'hidden'

    el.addEventListener('click', (e) => {
      const ripple = document.createElement('span')
      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)
    })
  }
})

添加对应的 CSS 样式：

vue实现点击涟漪

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

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

使用组件方式

创建可复用的 Ripple 组件：

<template>
  <div 
    class="ripple-container"
    @click="createRipple"
    ref="container"
  >
    <slot></slot>
    <span 
      v-for="(ripple, index) in ripples"
      :key="index"
      class="ripple"
      :style="{
        left: ripple.x + 'px',
        top: ripple.y + 'px',
        width: ripple.size + 'px',
        height: ripple.size + 'px'
      }"
    ></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ripples: []
    }
  },
  methods: {
    createRipple(e) {
      const container = this.$refs.container
      const rect = container.getBoundingClientRect()
      const size = Math.max(rect.width, rect.height)

      this.ripples.push({
        x: e.clientX - rect.left - size/2,
        y: e.clientY - rect.top - size/2,
        size: size
      })

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

<style scoped>
.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(2);
    opacity: 0;
  }
}
</style>