局部引入element-plus

import { ElMessage, ElMessageBox } from 'element-plus'
  const addRole = () => {
            ElMessageBox.prompt('Please input your e-mail', 'Tip', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                inputPattern:
                    /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                inputErrorMessage: 'Invalid Email',
            })
                .then(({ value }) => {
                    ElMessage({
                        type: 'success',
                        message: `Your email is:${value}`,
                    })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: 'Input canceled',
                    })
                })
        }

下面图片是样式显示在#app标签 外部

image.png

解决方法：需要引入element-plus ElMessage,ElMessageBox 的样式

import { ElMessage, ElMessageBox } from 'element-plus'
 import 'element-plus/es/components/message-box/style/index'
 import 'element-plus/es/components/message/style/index'

image.png

注：以上仅代表个人遇到的问题及解决方法