[feature request] you want the 'inputvalidator' parameter of 'prompt' to support 'promise' or 'callback' asynchronous operation

akebe
创建于
2019-12-15 07:54:53

Existing Component

Component Name

MessageBox

Description

希望inputValidator参数添加支持Promisecallback异步返回操作

MessageBox.prompt('为了保护你的帐号安全,请验证身份,验证成功后进行下一步操作', '身份验证', {
  confirmButtonText: '验证',
  cancelButtonText: '取消',
  inputType: 'password',
  inputPlaceholder: '请输入登录密码',
  inputValidator: v => {
    if (!v) return false;
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        v === '123' ? resolve() : reject(new Error('密码错误'));
      }, 1000);
    });
  },
  inputErrorMessage: '请输入密码',
  type: 'warning',
}).then(({value}) => {
  // eslint-disable-next-line no-console
  console.log(value);

});

正在用MessageBox.prompt构建一个验证身份弹层,用户输入后需要提交后台验证才能给出提示,因inputValidator不支持异步导致此功能无法直接用Promise链式实现

return new Promise(((resolve) => {
  MessageBox.prompt('为了保护你的帐号安全,请验证身份,验证成功后进行下一步操作', '身份验证', {
    confirmButtonText: '验证',
    cancelButtonText: '取消',
    inputType: 'password',
    inputPlaceholder: '请输入登录密码',
    inputValidator: v => !!v,
    inputErrorMessage: '请输入密码',
    type: 'warning',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        if (instance.inputValue === '123') {
          done();
          resolve()
        } else {
          instance.editorErrorMessage = '密码错误';
          const input = instance.getInputElement();
          input.classList.add('invalid')
        }
      } else {
        done();
      }
    },
  });
}));

虽然我通过return一个新Promise然后用beforeClose来处理实现,但还是希望官方给出原生支持

1条回答
element-bot
回复于
2019-12-15 07:54:58
#1

Translation of this issue:

Existing Component

yes

Component Name

MessageBox

Description

It is hoped that the 'inputvalidator' parameter addition supports' promise 'or' callback 'asynchronous return operation


MessageBox. Prompt ('In order to protect the security of your account, please verify your identity, and then carry out the next operation ',' authentication '{

Confirmbuttontext: 'verify',
Cancelbuttontext: 'Cancel',

inputType: 'password',
Inputplaceholder: 'please enter the login password',

inputValidator: v => {
if (!v) return false;

return new Promise((resolve, reject) => {
setTimeout(() => {

V = = = '123'? Resolve(): reject (new error ('password error '));
}, 1000);

};
}

Inputerrormessage: 'please enter password',
type: 'warning',

}).then(({value}) => {
// eslint-disable-next-line no-console

console.log(value);
};


An authentication shell layer is being built with 'MessageBox. Prompt'. Users need to submit background authentication after input to give a prompt. Because 'inputvalidator' does not support asynchrony, this function cannot be directly implemented with 'promise' chain

Although you can use 'return' to create a new 'promise' and then use 'callback' to process the implementation, you still want the official to provide native support

当前位于第1页,总计1 条回复

推荐相似问题

[bug report] after El image displays once, the shortcut key of ESC direction key fails?

Element UI version 2.13.0 OS/Browsers version 78.0.3904.108(正式版本) (64 位) Vue version 2.5.17 Reproduction Link https://co
讨论数 3
element
创建时间:2019-12-14 12:36:44

Dark theme

Hello, it is about few months I'm using element ui before I used vuetify. I can feel that element is faster and more sim
讨论数 2
element
创建时间:2019-12-14 08:56:02

[feature request] the horizontal menu overflows the screen range after expanding. Can you judge and expand in another direction?

Existing Component 是 Component Name NavMenu Description (横向菜单)靠浏览器视窗最右方的菜单项悬浮展开,然后再悬浮到子菜单展开,此时二级子菜单溢出到屏幕右方,无法选中。
讨论数 2
element
创建时间:2019-12-14 08:28:21

[Feature Request] provide function to toggle table selection with row-key

Existing Component Yes Component Name el-table Description Will be useful when using complex table with selection.
讨论数 2
element
创建时间:2019-12-14 05:49:28

When the default value of [bug report] inputnumber is empty string, the input box is displayed as 0

Element UI version 2.13.0 OS/Browsers version Google Chrome 80.0.3986.0(正式版本)canary (64 位) Vue version 2.6.10 Reproducti
讨论数 2
element
创建时间:2019-12-13 11:12:34

table组件树形数据&选择多行数据共存时的问题

table组件树形数据&选择多行数据时,使用 Checkbox 。全选或者父级选中,子级无法跟随响应选中
讨论数 2
element
创建时间:2019-12-13 11:06:40

[bug report] collapse embedded table jitters when expanding animation

Element UI version 2.13.0 OS/Browsers version Windows/ Chrome Vue version 2.6.10 Reproduction Link https://jsfiddle.net/
讨论数 4
element
创建时间:2019-12-13 10:41:57

[Bug Report] DatePicker 使用value-format="yyyy-MM-dd"后,显示的时间会比时间时间少一天

Element UI version 2.13.0 OS/Browsers version chrome Vue version 2.6.10 Reproduction Link https://codepen.io/pen/ Steps
讨论数 4
element
创建时间:2019-12-13 09:34:58

[Bug Report] Bug: dialog(destroy-on-close) dropdown

Element UI version 2.13.0 OS/Browsers version mac/chrome 78 Vue version 2.6.10 Reproduction Link https://jsfiddle.net/Ay
讨论数 2
element
创建时间:2019-12-13 09:29:07

table 懒加载问题

table 懒加载 父A数据—>子B数据 然后改数据源 父B数据—>子A数据 重新赋值给table 后 点击父B 懒加载 A 的数据时 报‘Maximum call stack size exceeded’,有没有解决方法
讨论数 3
element
创建时间:2019-12-13 09:28:50