局部引入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標(biāo)簽 外部

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

注：以上僅代表個(gè)人遇到的問題及解決方法