局部引入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
注：以上仅代表个人遇到的问题及解决方法
