Vue3初学之Element Plus Dialog对话框，Message组件,MessageBox组件

1. Dialog的使用：
   控制弹窗的显示和隐藏

<template><div><el-button @click="dialogVisible = true">打开弹窗</el-button><el-dialogv-model="dialogVisible"title="提示"width="30%":before-close="handleClose"><span>这是一段信息</span><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="dialogVisible = false">确定</el-button></span></template></el-dialog></div>
</template><script setup>
import { ref } from 'vue';const dialogVisible = ref(false);const handleClose = (done) => {dialogVisible.value = false;
};
</script>

增加内容尾部


弹窗打开时仍然可以与背景页面交互，可以设置 modal 属性为 false

2.Message组件
ElMessage 组件可以实现全局消息提示功能

 <template><el-button @click="openSuccess">成功消息</el-button><el-button @click="openWarning">警告消息</el-button><el-button @click="openInfo">普通消息</el-button><el-button @click="openError">错误消息</el-button>
</template><script setup>
import { ElMessage } from 'element-plus';
const openSuccess = () => {ElMessage.success('这是一条成功消息');
};
const openWarning = () => {ElMessage.warning('这是一条警告消息');
};
const openInfo = () => {ElMessage('这是一条普通消息');
};
const openError = () => {ElMessage.error('这是一条错误消息');
};
</script>

通过设置 dangerouslyUseHTMLString 属性为 true，可以将消息内容作为 HTML 片段处理

全局方法
如果 Element Plus 是全局引入的，ElMessage 会自动挂载到app.config.globalProperties，可以在 Vue 实例中直接使用

3. MesageBox组件
使用 confirm 显示确认框

<template><el-button @click="openConfirm">打开 Confirm</el-button>
</template><script setup>
import { ElMessageBox } from 'element-plus';const openConfirm = () => {ElMessageBox.confirm('此操作将永久删除该文件，是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {console.log('确认');}).catch(() => {console.log('取消');});
};
</script>

使用 prompt 显示输入框

<template><el-button @click="openPrompt">打开 Prompt</el-button>
</template><script setup>
import { ElMessageBox } from 'element-plus';const openPrompt = () => {ElMessageBox.prompt('请输入你的邮箱', '提示', {confirmButtonText: '确定',cancelButtonText: '取消'}).then(({ value }) => {console.log('用户输入的邮箱:', value);}).catch(() => {console.log('取消输入');});
};
</script>

全局方法
如果 Element Plus 是全局引入的，ElMessageBox 的方法会自动挂载到 app.config.globalProperties，可以在 Vue 实例中直接使用

this.$alert('这是一段内容', '标题');
this.$confirm('此操作将永久删除该文件，是否继续?', '提示');
this.$prompt('请输入你的邮箱', '提示');