elementui prompt
ElementUI Prompt 组件使用指南
ElementUI 的 Prompt 组件常用于弹窗式交互，通常结合 ElMessageBox 实现。以下是关键方法和示例：
基本调用方式
通过 ElMessageBox.prompt 触发弹窗，接收用户输入：
this.$prompt('请输入内容', '标题', {
confirmButtonText: '确认',
cancelButtonText: '取消',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确'
}).then(({ value }) => {
this.$message({ type: 'success', message: '输入的是: ' + value });
}).catch(() => {
this.$message({ type: 'info', message: '取消输入' });
});参数配置
title: 弹窗标题（支持 HTML 字符串）message: 提示内容（支持 VNode 或 HTML）inputType: 输入框类型（默认为text，可设为textarea）inputValue: 输入框默认值inputPlaceholder: 输入框占位文本inputValidator: 自定义校验函数，需返回布尔值或错误信息字符串
自定义验证示例
this.$prompt('请输入手机号', '验证', {
inputValidator: (val) => {
return /^1[3-9]\d{9}$/.test(val) || '手机号格式错误';
}
}).then(({ value }) => {
console.log('验证通过:', value);
});异步关闭处理
通过 beforeClose 实现异步验证：
this.$prompt('请输入验证码', '延迟关闭', {
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
setTimeout(() => {
done();
}, 1000);
} else {
done();
}
}
});样式定制
可通过 customClass 添加自定义 CSS 类名：
this.$prompt('内容', '标题', {
customClass: 'custom-prompt'
});对应样式需全局定义：
.custom-prompt .el-message-box__content {
padding: 20px;
}注意事项
- 在 Vue 3 环境中需使用
ElMessageBox的 Composition API 写法 - 输入框的校验规则应同时设置
inputPattern和inputErrorMessage - 弹窗层级可通过
zIndex参数调整（默认 2000） - 若需完全自定义界面，建议使用
Dialog组件替代
