vue实现原生全局alert
在Vue中实现原生全局alert功能，可以通过以下方法完成。这些方法确保在不破坏Vue响应式系统的情况下调用原生alert，同时支持全局调用。
挂载到Vue原型链
将alert方法挂载到Vue原型链上，所有组件实例均可通过this.$alert调用：
// main.js
Vue.prototype.$alert = function(message) {
window.alert(message);
};
// 组件内调用
this.$alert('这是一个全局alert');使用Vue插件封装
通过插件形式封装，便于维护和扩展：
// alertPlugin.js
const AlertPlugin = {
install(Vue) {
Vue.prototype.$alert = (message) => {
window.alert(message);
};
}
};
// main.js
import Vue from 'vue';
import AlertPlugin from './alertPlugin';
Vue.use(AlertPlugin);结合Vue的响应式特性
若需在alert显示时暂停组件逻辑，可使用Promise封装：
Vue.prototype.$confirmAlert = (message) => {
return new Promise((resolve) => {
window.alert(message);
resolve(true);
});
};
// 异步调用示例
async function showAlert() {
await this.$confirmAlert('操作确认');
console.log('alert关闭后执行');
}注意事项
- 原生
alert会阻塞浏览器线程，在SPA中谨慎使用。 - 移动端部分浏览器可能限制
alert的样式和行为。 - 推荐使用Vue生态的弹窗库（如
element-ui的MessageBox）替代原生实现，以获得更好的用户体验。
