Element Plus中的ElMessageBox弹窗输入多个信息
时间: 2024-10-11 16:03:37 浏览: 27
Element Plus中的`ElMessageBox`是一个轻量级的消息提示组件,用于在前端应用中显示警告、确认、提示等类型的对话框。如果你想在一个弹窗中同时输入多个信息,可以利用`ElMessageBox`的自定义属性或提供一个包含所需信息的对象。
例如,你可以创建一个对象,这个对象可能包含标题(title)、内容(content)以及其他的选项,如按钮文本(button text)或者验证规则(validation rules)。下面是一个简单的例子:
```javascript
const messageData = {
title: '请输入信息',
content: [
{ type: 'textarea', label: '文字输入', value: '' },
{ type: 'input', label: '数字输入', value: '', placeholder: '请输入数值' },
// 可以添加更多的输入项,比如选择器、单选等
],
confirmButtonText: '确定',
showCancelButton: true,
inputPattern: /\d+/ // 如果需要限制数字输入
};
ElMessageBox.show(messageData, {
onOk: function(values) {
console.log('用户输入:', values);
// 在这里处理用户的输入数据
},
onCancel: function() {
console.log('取消操作');
}
});
```
在这个示例中,用户可以在弹出的对话框中输入文字和数字,并有确认和取消按钮。当用户点击“确定”时,会触发`onOk`回调函数并获取到用户填写的所有值。
阅读全文