elementui按钮弹出输入框

可以使用 ElementUI 中的 Dialog 和 Input 组件来实现一个按钮弹出输入框的功能。

首先，在需要弹出输入框的页面中引入 Dialog 和 Input 组件：

<template>
  <div>
    <el-button type="primary" @click="showInputDialog">弹出输入框</el-button>
    <el-dialog
      title="输入框"
      :visible.sync="inputDialogVisible"
      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="inputDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmInput">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputDialogVisible: false,
      inputValue: "",
    };
  },
  methods: {
    showInputDialog() {
      this.inputDialogVisible = true;
    },
    handleClose(done) {
      if (this.inputValue === "") {
        this.$message.warning("输入内容不能为空！");
        done(false);
        return;
      }
      done();
    },
    confirmInput() {
      // 在这里处理输入内容
      console.log("输入内容为：" + this.inputValue);
      this.inputDialogVisible = false;
    },
  },
};
</script>

在这个示例中，我们通过按钮的点击事件来控制 Dialog 的显示和隐藏，使用 Input 组件来实现输入框，通过 Dialog 的 `before-close` 事件来判断输入内容是否为空，最后在“确定”按钮的点击事件中处理输入内容。

需要注意的是，为了让输入框自动获得焦点，我们在 Input 组件上加了 `autofocus` 属性。如果你不需要这个功能，可以去掉这个属性。

此外，还可以通过 Dialog 的 `width` 属性来设置输入框的宽度，通过 `slot="footer"` 来自定义 Dialog 的底部按钮区域。