element-ui $prompt输入弹框

实际开发过程中遇到关于使用$prompt的一些注意事项,需求是实现的弹框需要像element-ui示例具有邮箱校验功能,下面是最初的代码:

this.$prompt(`请设置 <span class="text-success">${this.name}</span> 的邮箱:`, '', {
        inputValue: this.email,
        dangerouslyUseHTMLString: true,
        closeOnClickModal: false,
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        // 具体业务逻辑
      }).catch(() => {
    })

但是会出现首次打开就会出现errorMessage提示,

 看了官方文档示例,想着是不是inputValue: this.email的问题,把该行代码注释掉,发现就不存在之前的问题了;最后发现是关于this.email初始值为空字符串而不是null导致首次打开$prompt输入框触发校验部分;最终代码修改成以下形式解决问题:

this.$prompt(`请设置 <span class="text-success">${this.name}</span> 的邮箱:`, '', {
        inputValue: this.email ? this.email : null,
        dangerouslyUseHTMLString: true,
        closeOnClickModal: false,
        inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        // 具体业务逻辑
      }).catch(() => {
    })

记录开发过程中遇到的一些问题,希望可以帮到遇到同样问题的小伙伴。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值