日常开发记录-element-ui $prompt输入弹框 * 必填用法--输入框默认值、校验、阻止关闭等问题...

// 引入Element UI的MessageBox和Message组件
import { MessageBox, Message } from 'element-ui';
 
// 弹出确认框，用户必须输入内容
MessageBox.prompt('请输入内容', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  inputPlaceholder: '请输入', // 输入框默认提示
  inputValue: '这是默认值', // 输入框默认值
  inputValidator: (value) => {
    if (!value) {
      return '输入内容不能为空'; // 验证输入是否为空
    }
  },
  beforeClose: (action, instance, done) => {
    if (action === 'confirm') {
      if (!instance.inputValue) {
        Message.info('请输入内容');
      } else {
        done(); // 如果输入有内容，则关闭弹框
      }
    } else {
      done(); // 如果点击取消，则直接关闭弹框
    }
  }
}).then(({ value }) => {
  // 用户输入内容后的操作
  console.log('输入的内容是：', value);
}).catch(() => {
  // 用户取消或关闭弹框的操作
  console.log('弹框已关闭');
});

这段代码使用了Element UI的$prompt方法创建了一个输入弹框，并对用户输入进行了必填性验证，同时设置了输入框的默认提示和默认值。如果用户尝试确认或关闭弹框而不输入内容，将会显示相应的消息提示。