elementui按钮弹出输入框
时间: 2023-09-16 20:11:28 浏览: 66
你可以使用 ElementUI 中的 Dialog 组件来实现按钮弹出输入框的效果。具体实现步骤如下:
1. 在页面中引入 ElementUI 组件库。
```
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
```
2. 在页面中添加一个按钮,并在按钮的点击事件中打开一个 Dialog 对话框。
```
<template>
<div>
<el-button @click="showDialog">打开对话框</el-button>
<el-dialog :visible.sync="dialogVisible">
<el-input v-model="inputValue"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
dialogVisible: false,
};
},
methods: {
showDialog() {
this.dialogVisible = true;
},
},
};
</script>
```
在上面的代码中,我们通过在按钮的点击事件中设置 `dialogVisible` 值为 `true` 来打开一个 Dialog 对话框,并在 Dialog 中添加了一个输入框和两个按钮,分别用于取消和确认操作。同时,我们通过 `v-model` 指令将输入框的值绑定到 `inputValue` 变量上,以便在确认操作时将输入框的值传递给其他组件或后台接口。