element-ui $prompt输入弹框和$confirm确认弹框用法–输入框默认值、校验、阻止关闭等问题

38次阅读
没有评论

可输入弹框 $prompt

1、默认值、校验

            this.$prompt(
                '请输入文件夹名称:', 
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type:"warning",            // 图标样式 "warning"|"error"...
                    inputValue: '输入框默认值',
                    inputErrorMessage: '输入不能为空',
                    inputValidator: (value) => {       // 点击按钮时,对文本框里面の值进行验证
                        if(!value) {
                            return '输入不能为空';
                        }
                    },
                    // callback:function(action, instance){
                    //     if(action === 'confirm'){
                    //         // do something...
                    //         console.log(instance.inputValue);
                    //     }
                    // }
                }).then(({value}) => {
                    console.log(value);
                    // TO DO DO ...
                }).catch((err) => {
                    console.log(err);
                });  

2、阻止弹框关闭:

            const msg = 'IP格式不正确!';
            const ipReg = new RegExp(/[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}$/);
            const that = this;

            this.$prompt(
            '请输入服務器IP(类似:8.8.8.8)',
            '提示',
            {
                inputValidator:(val) =>{
                    if(!ipReg.test(val)){
                        return msg;
                    }
                },
                // 阻止关闭(beforeClose中如果不调用done()弹框就无法关闭)
                beforeClose: (action, instance, done) => {
                    if(action === 'confirm' && !ipReg.test(instance.inputValue)){
                        that.$message(msg);
                    }else{
                        done();
                    } 
                }
            }).then(val =>{
                // ...
                that.$message({type:'success', message:'设置成功'});
            })

确认弹框 $confirm

调用方法同上,$confirm不带输入框。

facingscreen
版权声明:本站原创文章,由 facingscreen2022-08-12发表,共计947字。
转载说明:本文为搜栈网原创文章,除特殊说明外皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码