this.$prompt()在提示框里面添加俩个输入框
时间: 2024-09-24 17:18:56 浏览: 50
`this.$prompt()` 是 Vue.js 中的一个自定义提示组件,通常用于弹出对话框让用户输入信息,但它本身并不直接支持添加两个独立的输入框。要在 Vue 的 `this.$prompt()` 中添加两个输入框,你需要做的是:
1. 自定义一个组件:首先,你可以创建一个包含两个输入字段的自定义组件,比如 `<InputBox v-model="input1" />` 和 `<InputBox v-model="input2" />`,其中 `v-model` 是双向数据绑定。
2. 修改提示组件:然后,在 `this.$prompt` 的回调函数中,动态渲染这个自定义组件,传递所需的属性,例如:
```javascript
data() {
return {
input1: '',
input2: ''
};
},
methods: {
handlePrompt() {
const customPrompt = {
template: `
<div>
<h4>输入框1</h4>
<InputBox v-model="input1" />
<h4>输入框2</h4>
<InputBox v-model="input2" />
</div>
`,
props: ['placeholder', 'cancelText', 'confirmText'],
methods: {
onConfirm() {
// 提交处理...
},
onCancel() {
// 取消处理...
}
}
};
this.$prompt(customPrompt, { placeholder: '请输入...' }).then((values) => {
this.input1 = values.input1;
this.input2 = values.input2;
this.onConfirm(values); // 调用确认按钮的处理逻辑
});
}
}
```
这样,每次用户点击确认时,你就能获取到这两个输入框的内容了。
阅读全文