ElementUI Prompt

在使用ElementUI进行开发时，有时需要让用户输入一些信息，比如创建新项目时输入项目名称、修改用户名时输入新的用户名等。针对这种场景，ElementUI提供了一个简单易用的解决方案：Prompt对话框。

一、基于el-input与el-dialog组件构建

我们可以利用el-input和el-dialog两个组件来创建一个自定义的Prompt对话框。这为开发者提供了极大的灵活性，可以根据实际需求添加验证规则、调整样式等。

html

  <div>
    <!-- 触发弹窗的按钮 -->
    点击打开Prompt对话框
    <!-- 对话框 -->
    
      <span>请输入内容：</span>
      
      <span class="dialog-footer">
        取 消
        确 定
      </span>
    
  </div>
</p>


export default {
  data() {
    return {
      dialogVisible: false,
      inputValue: ''
    };
  },
  methods: {
    handleConfirm() {
      if (this.inputValue.trim()) {
        // 处理输入值
        console.log('用户输入:', this.inputValue);
        this.dialogVisible = false;
      } else {
        this.$message.error('输入不能为空');
      }
    }
  }
};


<p>

上述代码中，通过设置dialogVisible控制对话框显示隐藏，inputValue绑定输入框的值，handleConfirm方法用于处理确定按钮点击事件，对输入内容进行简单的非空校验。

二、直接使用$prompt方法

ElementUI还为我们提供了一种更简便的方式——直接调用this.$prompt()方法。这种方式无需额外编写模板代码，适合快速实现简单的Prompt功能。

javascript methods: { showPrompt() { this.$prompt('请输入邮箱', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /[w!#$%&'*+/=?^_`{|}~-]+(?:.[w!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/, inputErrorMessage: '邮箱格式不正确' }).then(({ value }) => { this.$message({ type: 'success', message: '你的邮箱是: ' + value }); }).catch(() => { this.$message({ type: 'info', message: '取消输入' }); }); } }