当前位置：首页 > VUE

vue实现声光弹窗

2026-01-15 02:28:48VUE

Vue 实现声光弹窗的方法

基础弹窗组件

创建基础弹窗组件 AlertModal.vue，包含动画和样式：

<template>
  <transition name="fade">
    <div v-if="show" class="alert-modal" :class="{'flash': isFlashing}">
      <div class="modal-content">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    show: Boolean,
    flash: Boolean
  },
  computed: {
    isFlashing() {
      return this.flash
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.alert-modal {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  background: #ff4757;
  color: white;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(255, 71, 87, 0.7);
  z-index: 1000;
}

.flash {
  animation: flash 0.5s infinite alternate;
}

@keyframes flash {
  from { box-shadow: 0 0 10px rgba(255, 71, 87, 0.7); }
  to { box-shadow: 0 0 30px rgba(255, 71, 87, 1); }
}
</style>

声音控制逻辑

在调用弹窗时加入声音效果：

vue实现声光弹窗

// 在工具文件中定义声音播放方法
export function playAlertSound() {
  const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3')
  audio.volume = 0.3
  audio.play().catch(e => console.log('Audio play failed:', e))
}

组合使用

在父组件中使用弹窗和声音：

<template>
  <button @click="triggerAlert">触发警报</button>
  <AlertModal :show="showAlert" :flash="true">
    警告！发现异常情况！
  </AlertModal>
</template>

<script>
import AlertModal from './AlertModal.vue'
import { playAlertSound } from './alertUtils'

export default {
  components: { AlertModal },
  data() {
    return {
      showAlert: false
    }
  },
  methods: {
    triggerAlert() {
      this.showAlert = true
      playAlertSound()
      setTimeout(() => {
        this.showAlert = false
      }, 3000)
    }
  }
}
</script>

增强效果选项

震动反馈（需要用户授权）：

vue实现声光弹窗

function triggerVibration() {
if ('vibrate' in navigator) {
 navigator.vibrate([200, 100, 200])
}
}

自定义音效：


const soundMap = {
warning: 'warning-sound.mp3',
success: 'success-sound.mp3'
}

export function playCustomSound(type) { const audio = new Audio(soundMap[type]) audio.play() }


#### 无障碍支持
为弹窗添加ARIA属性：
```vue
<div class="alert-modal" role="alert" aria-live="assertive">
  <!-- 内容 -->
</div>

标签: 声光 vue

分享给朋友：

vue 实现权限

Vue 实现权限控制的方法在 Vue 项目中实现权限控制通常涉及前端路由、组件和按钮级别的权限管理。以下是几种常见的实现方式：路由权限控制通过路由守卫实现权限验证，过滤用户无权访问的路由：…

vue实现遮罩

Vue 实现遮罩层的方法在 Vue 中实现遮罩层可以通过多种方式完成，以下是几种常见的方法：方法一：使用 v-show 或 v-if 控制显示通过 Vue 的指令动态控制遮罩层的显示与隐藏。…

vue实现类别

Vue 实现类别的几种方法在 Vue 中实现类别功能可以通过多种方式完成，以下是一些常见的方法：使用 v-bind:class 动态绑定类名通过对象语法或数组语法动态绑定类名，根据条件添加或移…

vue el 实现

Vue 中使用 Element UI (el) 的实现方法 Element UI 是一个基于 Vue 的组件库，提供丰富的 UI 组件，常用于快速构建企业级中后台产品。以下介绍 Vue 项目中集成和使…

vue实现Pop

Vue 实现 Popover 组件的方法使用 Vue 内置指令 v-show/v-if 和事件监听通过 Vue 的指令和事件绑定实现基础的 Popover 功能。定义一个布尔值控制 Popover…

vue实现接口轮询

实现接口轮询的基本方法在Vue中实现接口轮询通常通过setInterval或setTimeout结合异步请求完成。以下是一个基础实现示例： data() { return { poll…

vue实现声光弹窗