elementui按钮弹出输入框

你可以使用 ElementUI 的 Dialog 组件和 Input 组件来实现弹出输入框的效果。具体步骤如下：

1. 在需要添加按钮的页面中引入 ElementUI 组件库。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

2. 在页面中添加一个 Dialog 组件和一个 Button 组件。

<template>
  <div>
    <el-button @click="showDialog">点击弹出输入框</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <el-input v-model="inputValue"></el-input>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

3. 在 Vue 实例中声明 data 属性和 methods 方法。

export default {
  data() {
    return {
      dialogVisible: false,
      inputValue: ''
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    submit() {
      console.log(this.inputValue) // 在这里处理输入框的值
      this.dialogVisible = false
    }
  }
}

这样，点击按钮就可以弹出一个带有输入框的对话框，用户输入完毕后点击确定按钮即可。