当前位置：首页 > VUE

vue实现声光弹窗

2026-03-08 05:10:02VUE

Vue 实现声光弹窗的方法

基础弹窗组件

创建一个基础的弹窗组件，使用v-if或v-show控制显示状态。示例代码：

<template>
  <div class="alert-popup" v-show="visible">
    <div class="popup-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean
  }
}
</script>

<style scoped>
.alert-popup {
  position: fixed;
  z-index: 999;
  /* 其他样式 */
}
</style>

添加动画效果

使用Vue的过渡系统实现动画。在组件外层包裹<transition>标签：

<transition name="bounce">
  <alert-popup v-show="visible"/>
</transition>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% { transform: scale(0) }
  50% { transform: scale(1.1) }
  100% { transform: scale(1) }
}
</style>

声音效果实现

通过Audio对象播放声音：

// 在methods中
playSound() {
  const audio = new Audio('notification.mp3')
  audio.play()
}

闪烁效果

通过CSS动画实现背景闪烁：

.alert-popup {
  animation: flash 0.5s 3;
}
@keyframes flash {
  0%, 100% { background-color: normal }
  50% { background-color: #ff0000 }
}

完整实现示例

组合所有功能的完整组件：

vue实现声光弹窗

<template>
  <transition name="bounce">
    <div class="alert-popup" v-show="visible" @animationend="onAnimationEnd">
      <div class="popup-content">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    visible: Boolean
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.playSound()
      }
    }
  },
  methods: {
    playSound() {
      const audio = new Audio('notification.mp3')
      audio.play()
    },
    onAnimationEnd() {
      // 动画结束处理
    }
  }
}
</script>