this.$confirm(msgTips, "确认删除", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", })弹框想要加input怎么办
时间: 2023-07-05 15:34:05 浏览: 161
你可以使用 Element UI 中的 Dialog 组件来实现带有输入框的弹框。具体步骤如下:
1. 在你的 Vue 组件中引入 Dialog 和 Input 组件:
```
<template>
<div>
<el-button type="primary" @click="showDialog">弹出对话框</el-button>
<el-dialog :visible.sync="dialogVisible" title="确认删除">
<el-input v-model="inputValue" placeholder="请输入" />
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { Dialog, Input, Button } from 'element-ui'
export default {
components: {
ElDialog: Dialog,
ElInput: Input,
ElButton: Button,
},
data() {
return {
dialogVisible: false,
inputValue: '',
}
},
methods: {
showDialog() {
this.dialogVisible = true
},
handleConfirm() {
console.log(this.inputValue)
this.dialogVisible = false
},
},
}
</script>
```
2. 在模板中使用 Dialog 和 Input 组件,并在 Dialog 组件中添加一个自定义的底部按钮区域,用来放置确认和取消按钮。
3. 在 data 中定义一个 inputValue 变量来存储用户输入的值,在 handleConfirm 方法中可以获取到这个值并进行后续的操作。
这样你就可以在弹框中加入输入框了。
阅读全文