Vue中div实现alert
Vue中实现div模拟alert弹窗
在Vue中可以通过组件化方式实现类似alert功能的div弹窗，以下是具体实现方案：
创建基础弹窗组件
新建Alert.vue文件，包含模板、样式和逻辑：
<template>
<div v-if="visible" class="alert-overlay">
<div class="alert-box">
<div class="alert-content">{{ message }}</div>
<button @click="close">确定</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
message: ''
}
},
methods: {
show(msg) {
this.message = msg
this.visible = true
},
close() {
this.visible = false
}
}
}
</script>
<style scoped>
.alert-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.alert-box {
background: white;
padding: 20px;
border-radius: 4px;
min-width: 300px;
}
.alert-content {
margin-bottom: 15px;
}
</style>全局注册使用 在main.js中注册为全局组件并提供调用方法：
import Vue from 'vue'
import Alert from './components/Alert.vue'
const AlertComponent = Vue.extend(Alert)
const alertInstance = new AlertComponent().$mount()
document.body.appendChild(alertInstance.$el)
Vue.prototype.$alert = function(message) {
alertInstance.show(message)
}在组件中调用 任何Vue组件内可通过this调用：
methods: {
showAlert() {
this.$alert('这是一条提示信息')
}
}添加动画效果 可通过transition实现淡入淡出效果：
<transition name="fade">
<div v-if="visible" class="alert-overlay">
<!-- 弹窗内容 -->
</div>
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>支持Promise 修改alert方法使其返回Promise：
Vue.prototype.$alert = function(message) {
return new Promise(resolve => {
alertInstance.show(message)
alertInstance.$once('closed', resolve)
})
}这种实现方式比原生alert更灵活，可以自定义样式和交互行为，同时保持非阻塞的异步特性。
