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

844次阅读

            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);
                });

            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不带输入框。

发表于：Javascript/前端、技术分享

2022-08-12

复制链接

赏