elementui实现弹框输入

在Element UI中，可以使用Dialog组件来实现一个弹框输入的功能。以下是一个简单的例子，展示了如何使用Element UI的Dialog组件来创建一个包含输入框的弹框。

<template>
  <el-button @click="dialogVisible = true">打开弹框</el-button>
  <el-dialog
    title="输入框"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose">
    <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitInput">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      inputValue: ''
    };
  },
  methods: {
    handleClose(done) {
      if (this.inputValue) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      } else {
        done();
      }
    },
    submitInput() {
      // 处理输入值的逻辑
      console.log('输入的内容是：', this.inputValue);
      this.dialogVisible = false;
    }
  }
};
</script>

在这个例子中，我们定义了一个dialogVisible变量来控制弹框的显示与隐藏，以及一个inputValue变量来存储用户的输入。弹框中有一个el-input组件用于输入，并且定义了确认和取消按钮用于操作。handleClose方法用于在关闭弹框前进行一些条件判断，submitInput方法用于处理用户提交的输入。