首先，确保你已经在项目中引入了 Element Plus。如果没有，你可以通过以下方式安装：
npm install element-plus
然后，在你的 Vue 组件中使用 el-message：
<template>
<div>
<el-button @click="showSuccessMessage">显示成功消息</el-button>
<el-button @click="showErrorMessage">显示错误消息</el-button>
<el-button @click="showWarningMessage">显示警告消息</el-button>
<el-button @click="showInfoMessage">显示信息消息</el-button>
</div>
</template>
<script>
import { ElButton, ElMessage } from 'element-plus';
export default {
components: {
ElButton,
},
methods: {
showSuccessMessage() {
ElMessage.success('这是成功消息');
},
showErrorMessage() {
ElMessage.error('这是错误消息');
},
showWarningMessage() {
ElMessage.warning('这是警告消息');
},
showInfoMessage() {
ElMessage.info('这是信息消息');
},
},
};
</script>
在这个例子中，我们使用了 el-button 组件来触发显示不同类型的消息。通过点击按钮，分别调用 ElMessage.success、ElMessage.error、ElMessage.warning、ElMessage.info 方法来显示不同类型的消息。
el-message 提供了几个静态方法，用于不同类型的消息提示。你可以根据实际需求调整消息组件的样式和配置。
转载请注明出处：http://www.zyzy.cn/article/detail/5563/ElementPlus