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

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

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

野生猿rang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值