vue中实现alert 弹窗

使用浏览器原生 alert

在 Vue 中可以直接调用浏览器原生的 alert 方法，适用于简单提示场景。

methods: {
  showAlert() {
    alert('这是一个提示信息');
  }
}

使用第三方 UI 库

主流 UI 库如 Element UI、Ant Design Vue 等都提供功能更丰富的弹窗组件。

以 Element UI 为例：

// 安装 Element UI 后
this.$alert('这是一条提示信息', '标题', {
  confirmButtonText: '确定',
  callback: action => {
    console.log('用户点击了确定');
  }
});

自定义弹窗组件

可以创建可复用的自定义弹窗组件。

1. 创建 Alert.vue 组件：

   
   <template>
   <div class="alert-overlay" v-if="visible">
    <div class="alert-box">
      <h3>{{ title }}</h3>
      <p>{{ message }}</p>
      <button @click="close">确定</button>
    </div>
   </div>
   </template>

export default { props: ['title', 'message', 'visible'], methods: { close() { this.$emit('close'); } } } ```

1. 在父组件中使用：

   
   <template>
   <button @click="showCustomAlert">显示弹窗</button>
   <Alert 
    :title="alertTitle"
    :message="alertMessage"
    :visible="showAlert"
    @close="showAlert = false"
   />
   </template>

import Alert from './Alert.vue';

export default { components: { Alert }, data() { return { showAlert: false, alertTitle: '自定义标题', alertMessage: '这是自定义内容' } }, methods: { showCustomAlert() { this.showAlert = true; } } }

```

使用 Vuex 管理弹窗状态

对于全局弹窗，可以通过 Vuex 集中管理状态。

1. 在 store 中定义：

   const store = new Vuex.Store({
   state: {
    alert: {
      show: false,
      title: '',
      message: ''
    }
   },
   mutations: {
    showAlert(state, payload) {
      state.alert = { ...payload, show: true };
    },
    hideAlert(state) {
      state.alert.show = false;
    }
   }
   });

2. 在组件中调用：

   methods: {
   showGlobalAlert() {
    this.$store.commit('showAlert', {
      title: '全局提示',
      message: '这是全局弹窗内容'
    });
   }
   }

使用事件总线

对于非父子组件间的通信，可以使用事件总线触发弹窗。

1. 创建 eventBus.js：

   import Vue from 'vue';
   export const EventBus = new Vue();

2. 在接收组件中监听：

   created() {
   EventBus.$on('show-alert', (payload) => {
    this.showAlert = true;
    this.alertMessage = payload.message;
   });
   }

3. 在发送组件中触发：

   

   methods: {
   triggerAlert() {
    EventBus.$emit('show-alert', {
      message: '来自事件总线的消息'
    });
   }
   }