当前位置：首页 > VUE

vue中实现alert 弹窗

2026-01-22 19:52:54VUE

使用原生 JavaScript 的 `alert`

在 Vue 中可以直接调用原生 JavaScript 的 alert 方法：

methods: {
  showAlert() {
    alert('这是一个简单的弹窗');
  }
}

使用第三方库（如 SweetAlert2）

SweetAlert2 是一个功能丰富且美观的弹窗库，可以替代原生 alert。

安装 SweetAlert2：

npm install sweetalert2

在 Vue 组件中使用：

import Swal from 'sweetalert2';

methods: {
  showSweetAlert() {
    Swal.fire({
      title: '提示',
      text: '这是一个 SweetAlert2 弹窗',
      icon: 'success',
      confirmButtonText: '确定'
    });
  }
}

使用 Vue 组件实现自定义弹窗

创建一个可复用的弹窗组件 Alert.vue：

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

<script>
export default {
  props: {
    title: String,
    message: String,
    show: Boolean
  },
  methods: {
    close() {
      this.$emit('close');
    }
  }
};
</script>

<style>
.alert-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.alert-box {
  background: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}
</style>

在父组件中使用：

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

<script>
import Alert from './Alert.vue';

export default {
  components: { Alert },
  data() {
    return {
      alertTitle: '提示',
      alertMessage: '这是一个自定义弹窗',
      isAlertVisible: false
    };
  },
  methods: {
    showAlert() {
      this.isAlertVisible = true;
    }
  }
};
</script>

使用 Element UI 的弹窗组件

如果项目中使用 Element UI，可以直接使用其提供的弹窗组件。

安装 Element UI：

npm install element-ui

在 Vue 项目中使用：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

在组件中调用弹窗：

methods: {
  showElementAlert() {
    this.$alert('这是一个 Element UI 弹窗', '提示', {
      confirmButtonText: '确定',
      callback: action => {
        console.log('弹窗已关闭');
      }
    });
  }
}

使用 Vuetify 的弹窗组件

如果项目中使用 Vuetify，可以使用其提供的弹窗组件。

安装 Vuetify：

npm install vuetify

在 Vue 项目中使用：

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

在组件中调用弹窗：

<template>
  <v-dialog v-model="dialog" max-width="290">
    <v-card>
      <v-card-title class="headline">提示</v-card-title>
      <v-card-text>这是一个 Vuetify 弹窗</v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="green darken-1" text @click="dialog = false">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialog: false
    };
  },
  methods: {
    showDialog() {
      this.dialog = true;
    }
  }
};
</script>

vue中实现alert 弹窗