### 代码如下 ``` <template> <el-button :plain="true" @click="open2">成功</el-button> <el-button :plain="true" @click="open3">警告</el-button> <el-button :plain="true" @click="open1">消息</el-button> <el-button :plain="true" @click="open4">错误</el-button> </template> <script> export default { methods: { open1() { this.$message('这是一条消息提示'); }, open2() { this.$message({ message: '恭喜你，这是一条成功消息', type: 'success' }); }, open3() { this.$message({ message: '警告哦，这是一条警告消息', type: 'warning' }); }, open4() { this.$message.error('错了哦，这是一条错误消息'); } } } </script> ``` 官方文档： https://element.eleme.cn/#/zh-CN/component/message ### 其他封装的写法 代码如下： ``` ElMessage({ type: 'warning', message: '暂不支持该类型文件预览!目前支持图片与word、pdf、excel、图片、txt等文件预览！', }) ElMessage({ type: 'success', message: '删除成功!', }) ElMessage({ type: 'error', message: '你不是上传用户，无法进行文件修改！', }) ``` 参考： https://www.w3cschool.cn/vue_elementplus/vue_elementplus-gp713kqs.html