vue实现声光弹窗

实现声光弹窗的步骤

在Vue中实现声光弹窗需要结合视觉和听觉效果。视觉上使用弹窗组件，听觉上播放提示音。以下是具体实现方法：

创建基础弹窗组件

使用Vue的过渡效果和条件渲染实现弹窗显示/隐藏。组件模板包含标题、内容和操作按钮。

<template>
  <transition name="fade">
    <div v-if="visible" class="modal-overlay">
      <div class="modal-content" :class="{'alert': type === 'alert'}">
        <h3>{{ title }}</h3>
        <p>{{ message }}</p>
        <button @click="close">关闭</button>
      </div>
    </div>
  </transition>
</template>

添加闪光效果

通过CSS动画实现闪烁效果，在警告类弹窗时触发。

.modal-content.alert {
  animation: flash 0.5s 3;
  border: 2px solid #ff0000;
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; background-color: #ffeeee; }
}

集成音频播放

在组件中预加载音频文件，显示弹窗时自动播放提示音。

export default {
  data() {
    return {
      audio: new Audio(require('@/assets/alert.mp3'))
    }
  },
  methods: {
    show() {
      this.visible = true
      this.audio.play()
    },
    close() {
      this.visible = false
      this.audio.pause()
      this.audio.currentTime = 0
    }
  }
}

全局注册与调用

将组件注册为全局组件，方便在任何地方调用。

// main.js
import AlertModal from '@/components/AlertModal.vue'
Vue.component('AlertModal', AlertModal)

// 使用示例
this.$modal.show({
  title: '警告',
  message: '发生重要事件！',
  type: 'alert'
})

响应式设计优化

确保弹窗在不同设备上正常显示，添加响应式样式。

.modal-content {
  width: 80%;
  max-width: 500px;
}

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
  }
}

注意事项

1. 音频文件不宜过长，建议使用短促的提示音
2. 闪光频率不宜过高，避免引发光敏性癫痫
3. 提供关闭按钮和键盘ESC键关闭功能
4. 移动端需处理触摸事件和音频自动播放限制

实现效果可通过调整CSS动画参数和更换音频文件来定制不同的声光组合效果。