当前位置：首页 > VUE

vue实现声光弹窗

2026-02-11 05:29:26VUE

Vue 实现声光弹窗的方法

基础弹窗组件

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

<template>
  <transition name="fade">
    <div v-if="visible" class="alert-modal" :class="type">
      <div class="content">{{ message }}</div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    message: String,
    type: { type: String, default: 'info' } // 支持 success/warning/error 等类型
  }
}
</script>

<style scoped>
.alert-modal {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  animation: pulse 1.5s infinite;
}

.success { background-color: #4CAF50; color: white; }
.warning { background-color: #FFC107; color: black; }
.error { background-color: #F44336; color: white; }

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

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}
</style>

添加声音效果

在组件挂载时播放提示音：

<script>
export default {
  // ...其他代码
  mounted() {
    const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
    audio.play().catch(e => console.log("Audio playback failed:", e));
  }
}
</script>

全局调用方式

创建插件式调用方法（在 main.js 中注册）：

vue实现声光弹窗

// alertPlugin.js
const AlertPlugin = {
  install(Vue) {
    const AlertConstructor = Vue.extend(AlertModal)
    const alertInstance = new AlertConstructor()
    document.body.appendChild(alertInstance.$mount().$el)

    Vue.prototype.$alert = (message, type = 'info', duration = 3000) => {
      alertInstance.message = message
      alertInstance.type = type
      alertInstance.visible = true

      setTimeout(() => {
        alertInstance.visible = false
      }, duration)
    }
  }
}

// main.js
import AlertPlugin from './alertPlugin'
Vue.use(AlertPlugin)

使用方法

在任意组件中触发：

this.$alert('操作成功！', 'success')
// 或
this.$alert('发生错误', 'error', 5000)

高级定制选项

添加更多动画效果：

vue实现声光弹窗

.alert-modal {
transform: translateY(-20px);
transition: transform 0.3s ease-out;
}
.alert-modal.show {
transform: translateY(0);
}

支持自定义音效：

Vue.prototype.$alert = (message, options = {}) => {
if (options.sound) {
 new Audio(options.sound).play()
}
// ...其他逻辑
}

响应式位置调整：

@media (max-width: 768px) {
.alert-modal {
 width: 90%;
 left: 5%;
 right: auto;
}
}

标签: 声光 vue

分享给朋友：

vue实现视频会议

使用 Vue 实现视频会议技术选型 Vue.js 作为前端框架，结合 WebRTC 技术实现实时音视频通信。常用的库包括： peerjs：简化 WebRTC 的点对点连接。 socket.io：用…

vue穿梭框组件实现

实现基础穿梭框组件在Vue中实现穿梭框组件，可以使用<el-transfer>（Element UI）或手动实现。以下是手动实现的核心逻辑： <template> &l…

vue请求实现进度条

实现请求进度条的方法在Vue中实现请求进度条可以通过多种方式完成，常见的有使用第三方库如axios结合nprogress或自定义进度条组件。以下是几种实现方法：使用axios和nprogres…

vue实现语音

Vue 实现语音功能的方法使用 Web Speech API Vue 可以结合 Web Speech API 实现语音识别和合成功能。Web Speech API 包含 SpeechRecognit…

vue实现图库

Vue 实现图库的基本方法使用 Vue 实现图库功能可以通过多种方式完成，以下是一些常见的方法和实现步骤。使用 Vue 和第三方库（如 Vue Gallery）安装 vue-gallery 或…

vue实现管道

Vue 中实现管道（Pipe）功能在 Vue 中可以通过过滤器（Filters）或计算属性（Computed Properties）实现类似管道的功能，将数据经过多个处理步骤后输出。使用过滤器…

vue实现声光弹窗