MessageBox添加俩个输入框
时间: 2024-09-24 21:19:17 浏览: 26
Vue.js 中的 `MessageBox` 是一个内置的警告、确认等对话框组件,主要用于向用户显示消息并请求交互。如果你需要在 MessageBox 中添加两个输入框,原生的 MessageBox 并未提供这样的功能,因为它主要是为了单行文本输入而设计的。不过,你可以通过一些技巧来实现类似的需求:
1. 弹窗外部创建输入框:你可以在弹窗之外创建两个 `<input>` 元素,并通过 `v-model` 绑定到组件的数据对象上,然后将这两个输入框的值传递给 MessageBox。
```html
<template>
<button @click="showCustomMessage">显示带输入框的对话框</button>
<!-- 使用 slot 或者 ref 来隐藏实际的输入框 -->
<el-dialog v-model="dialogVisible" title="带有输入框的消息">
<template #body>
<div>
<label for="input1">输入框1:</label>
<input type="text" id="input1" v-model="customInputs.input1" />
<label for="input2">输入框2:</label>
<input type="text" id="input2" v-model="customInputs.input2" />
</div>
</template>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
customInputs: { input1: '', input2: '' },
};
},
methods: {
showCustomMessage() {
this.dialogVisible = true;
},
handleOk(values) {
// 检查输入并执行其他逻辑
console.log('输入1:', values.input1, ' 输入2:', values.input2);
this.dialogVisible = false;
},
},
};
</script>
```
在这个例子中,用户点击按钮时会打开一个对话框,对话框内有两处输入区域,当用户点击确认(默认的 OK 按钮)时,输入的值会被传入 `handleOk` 函数。