使⽤MessageBox 弹框组件

在Vue.js中，`MessageBox`是Element UI库提供的一个强大的弹窗组件，用于显示警告、确认、提示等多种类型的用户交互消息。以下是基本的使用方法：

1. 首先，你需要在项目中安装Element UI并引入所需的样式和组件：

npm install element-ui --save

然后在main.js或vue.config.js中注册Element UI：

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

Vue.use(ElementUI);

2. 在你的Vue组件中，你可以使用`this.$messageBox`来触发弹框：

<template>
  <button @click="handleClick">点击弹框</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$messageBox({
        title: '这是一个标题',
        message: '这是一条消息',
        type: 'info', // 可选类型有：success, info, warning, error, question
        confirmButtonText: '确定', // 确定按钮文字
        cancelButtonText: '取消', // 取消按钮文字
        showCancelButton: true, // 是否显示取消按钮
        defaultAnswer: 'yes', // 默认选择，仅适用于question类型
      }).then((action) => {
        console.log(action); // 返回用户的选择，比如'confirm'或'user clicked cancel'
      });
    }
  }
};
</script>

3. `MessageBox`组件提供了许多可配置选项，如图标、时间、回调函数等。详细配置可以参考Element UI的官方文档：https://element.eleme.cn/#/zh-CN/component/message-box