Element-ui弹框MessageBox 弹框
需求:弹框输入框可校验多种状态
新建分组
校验多种状态用到了MessageBox 的inputValidator的属性,可以返回布尔值或字符串,若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage;

this.$prompt('分组名称', '新建分组', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // inputPattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
                inputValidator(value){
                    if (value == undefined) {
                        return '分组名不能为空'
                    } else if (value.length == 0) {
                        return '分组名不能为空'
                    } else if (!value.match('^[a-zA-Z0-9_\u4e00-\u9fa5]+$')) {
                        return '不支持特殊字符'
                    } else if (value.length > 20) {
                        return '请输入20个字符以内的分组名称'
                    }
                },
                inputErrorMessage: '不支持特殊字符'
                }).then(({ value }) => {
                //点击确定需要执行的方法
                }).catch(() => {
	                 this.$message({
	                    type: 'info',
	                    message: '取消新建'
	                });       
            });

上面之所以要判定一次value == undefined,是因为如果只判断了value.length==0,那么在弹框出现后直接点击确定是不会出现“分组名不能为空’的提示,因为此时的value值并不存在是undefined。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐