Vue Element UI 消息提示框

 1 this.$prompt('Reason：', 'To Operation Agent', {
 2                     showCancelButton: true,
 3                     showInput: true,
 4                     inputType: 'textarea',
 5                     inputValue: "",
 6                     inputValidator: value => {
 7                         if (value === "") {
 8                             return true;
 9                         }
10                         return !(value.length > 10);
11                     },
12                     inputErrorMessage: 'input maxLength is 10!',
13                     beforeClose:(action, instance, done)=> {
14                         if (action==='confirm'){
15                             alert("1111");
16                         }
17                         done();
18 
19                     }
20                 }).then(() => {
21                     this.$message({
22                         type: 'success',
23                         message: '已驳回'
24                     });
25                 }).catch(() => {
26                     this.$message({
27                         type: 'info',
28                         message: '已取消'
29                     });
30                 });

介绍：使用Vue Element UI 封装的MessageBox的提示框

主要功能：

1：可输入文字的提示框（textarea）：inputType: 'textarea',

2：有校验和校验提示：inputValidator和inputErrorMessage

3：点击消息提示框的确认按钮前可添加自己的操作：beforeClose

4：beforeClose中一定在自定义操作结束后添加done()方法，保证按钮操作能正常结束

拓展：

1：提示框还有：text，password和number类型

2：如果在BeforeClose中不指定action===confirm，则页面的X和取消，确认按钮都会触发BeforeClose里面的操作，

action===confirm：只有确认按钮触发

action!=confirm:只有X和取消按钮触发