vue实现原生全局alert
Vue 实现原生全局 alert
在 Vue 中实现全局 alert 功能，可以通过以下几种方法：
使用 Vue 实例方法扩展
通过扩展 Vue 的原型方法，可以在任何组件中调用全局 alert：
// main.js
import Vue from 'vue'
Vue.prototype.$alert = function(message) {
window.alert(message)
}
// 组件中使用
this.$alert('这是一个全局 alert')创建全局指令
通过自定义指令实现全局 alert 功能：
// main.js
import Vue from 'vue'
Vue.directive('alert', {
bind(el, binding) {
el.addEventListener('click', () => {
window.alert(binding.value)
})
}
})
// 组件中使用
<button v-alert="'点击触发alert'">点击我</button>使用插件方式封装
创建一个可复用的插件：
// alertPlugin.js
export default {
install(Vue) {
Vue.prototype.$alert = function(message) {
window.alert(message)
}
}
}
// main.js
import Vue from 'vue'
import AlertPlugin from './alertPlugin'
Vue.use(AlertPlugin)
// 组件中使用
this.$alert('插件式全局alert')结合 Promise 封装
实现更复杂的 alert 交互：
Vue.prototype.$confirm = function(message) {
return new Promise((resolve) => {
const result = window.confirm(message)
resolve(result)
})
}
// 组件中使用
async function handleConfirm() {
const result = await this.$confirm('确定要删除吗？')
if (result) {
// 用户点击确定
}
}注意事项
- 原生 alert 会阻塞浏览器线程，考虑使用更现代的弹窗方案如自定义组件
- 在服务端渲染(SSR)环境中，window 对象可能不存在，需要做环境判断
- 对于复杂需求，建议使用专门的 UI 库如 Element UI 的 MessageBox 或 Vuetify 的 dialogs
