Vue ElementUI 修改消息提示框样式—messageBox 的大小

在Vue中使用ElementUI时，若要修改messageBox的大小，可以通过CSS覆盖默认样式来实现。以下是一个简单的例子，展示如何通过外部CSS来修改messageBox的大小：

1. 首先，确保你已经在项目中包含了ElementUI，并且正确地使用了MessageBox组件。
2. 接下来，在你的组件的<style>标签中或者一个单独的CSS文件中，添加CSS规则来覆盖默认的样式。

/* 在组件的<style>标签中 */
<style scoped>
.custom-message-box .el-message-box__wrapper {
  width: 500px; /* 修改为所需的宽度 */
}
</style>
 
<!-- 或者在单独的CSS文件中 -->
<style>
.custom-message-box .el-message-box__wrapper {
  width: 500px; /* 修改为所需的宽度 */
}
</style>

3. 在调用MessageBox时，添加customClass属性来应用你定义的样式。

import { MessageBox } from 'element-ui';
 
// 调用MessageBox时添加customClass
MessageBox.confirm('确认信息', {
  customClass: 'custom-message-box'
}).then(() => {
  // 确认操作
}).catch(() => {
  // 取消操作
});

通过以上步骤，你应该能够看到messageBox的大小已经被修改。记得替换500px为你想要的尺寸。如果需要更多定制化的样式，可以继续添加CSS规则来覆盖其他相关元素的样式。