可以使用 ElementUI 中的
Dialog 和 Input 组件来实现一个按钮
弹出输入框的功能。
首先，在需要
弹出输入框的页面中引入
Dialog 和 Input 组件：
```html
<template>
<div>
<el-button type="primary" @click="showInput
Dialog">
弹出输入框</el-button>
<el-
dialog
title="
输入框"
:visible.sync="input
DialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form>
<el-form-item label="请输入内容">
<el-input v-model="inputValue" autofocus></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="
dialog-footer">
<el-button @click="input
DialogVisible = false">取 消</el-button>
<el-button type="primary" @click="confirmInput">确 定</el-button>
</div>
</el-
dialog>
</div>
</template>
<script>
export default {
data() {
return {
input
DialogVisible: false,
inputValue: "",
};
},
methods: {
showInput
Dialog() {
this.input
DialogVisible = true;
},
handleClose(done) {
if (this.inputValue === "") {
this.$message.warning("输入内容不能为空！");
done(false);
return;
}
done();
},
confirmInput() {
// 在这里处理输入内容
console.log("输入内容为：" + this.inputValue);
this.input
DialogVisible = false;
},
},
};
</script>
```
在这个示例中，我们通过按钮的点击事件来控制
Dialog 的显示和隐藏，使用 Input 组件来实现
输入框，通过
Dialog 的 `before-close` 事件来判断输入内容是否为空，最后在“确定”按钮的点击事件中处理输入内容。
需要注意的是，为了让
输入框自动获得焦点，我们在 Input 组件上加了 `autofocus` 属性。如果你不需要这个功能，可以去掉这个属性。
此外，还可以通过
Dialog 的 `width` 属性来设置
输入框的宽度，通过 `slot="footer"` 来自定义
Dialog 的底部按钮区域。
581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
