自动导入时，Message Box 组件无样式

<template>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="addRole">添加角色</el-button>
      </el-form-item>
    </el-form>
</template>

import { ElMessage, ElMessageBox } from 'element-plus'

const addRole = () => {
  ElMessageBox.prompt('请输入角色名称', '添加', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
  .then(({value}) => {
      ElMessage({
        type: 'success',
        message: `${value}角色添加成功`,
      });
    })
  .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      });
    });
}

• 弹出框出现在页面最下方

解决方法

• main.ts 导入样式：

import 'element-plus/theme-chalk/src/message-box.scss'
import 'element-plus/theme-chalk/src/message.scss'
createApp(App).use(router).mount('#app')