layer.prompt弹层

使用layer.open实现方式:

附:源码如下

layer.open({
	//formType: 2,//这里依然指定类型是多行文本框,但是在下面content中也可绑定多行文本框在这里插入代码片
	title: '是否确信将账号临时挂账?',
	area: ['300px', '240px'],
	btnAlign: 'c',
	closeBtn:'1',//右上角的关闭
	content: `<div><p>备注:</p><textarea name="txt_remark" id="remark" style="width:200px;height:80px;"></textarea></div>`,
	btn:['确认','取消','关闭'],
	yes: function (index, layero) {
	var value1 = $('#remark').val();//获取多行文本框的值
	alert('您刚才输入了:' + value1);
	layer.close(index);
	//可执行确定按钮事件并把备注信息(即多行文本框值)存入需要的地方
},
no:function(index){
	alert('您刚才点击了取消按钮');
	layer.close(index);
	return false;//点击按钮按钮不想让弹层关闭就返回false
},
close:function(index){
	alert('您刚才点击了关闭按钮');
	return false;//点击按钮按钮不想让弹层关闭就返回false
}

});

附:layer.open中按钮点击事件:

layer.open({
	content: 'test'
	,btn: ['按钮一', '按钮二', '按钮三']
	,yes: function(index, layero){
	//按钮【按钮一】的回调
	},btn2: function(index, layero){
		//按钮【按钮二】的回调
		alert('这是点击了按钮二');
		return false;//点击后不关闭窗口,需返回false
	},btn3: function(index, layero){
		//按钮【按钮三】的回调
		alert('这是点击了按钮三');
		return false;//点击后不关闭窗口,需返回false
	}
	,cancel: function(){
	//右上角关闭回调
	}
});

用layer.open可以实现弹出文本框及按钮事件,layer.prompt也是在layer.open基础上的封装…
使用layer.prompt时,如果文本框输入值是空的话点击确定没有反应,不能向下执行。但是我又需要在这种情况下去继续执行判断或逻辑时该怎么做??
注:使用layer.prompt时,layer使用的版本为layer-v3.0

官方代码说明如下:
//prompt层新定制的成员如下

{
	formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)
	value: '', //初始时的值,默认空字符
	maxlength: 140, //可输入文本的最大长度,默认500
}

//例子1

layer.prompt(function(value, index, elem){
	alert(value); //得到value
	layer.close(index);
});

//例子2

layer.prompt({
	formType: 2,
	value: '初始值',
	title: '请输入值',
	area: ['800px', '350px'] //自定义文本域宽高
	}, function(value, index, elem){
	alert(value); //得到value
	layer.close(index);
});

示例代码如下:

layer.prompt({
    formType:2,
    title:'请填写排除原因(注:必填项)',
    area:['500px','150px'],
    btnAlign:'c'
},function(value,index,elem){
    alert(value);
    laker.close(index);
});

由官网查看文档可知layer.prompt也是继承layer.open的,所以改成如下所示:

layer.prompt({
    formType: 2,
    title: '请填写排除原因(注:必填项)',
    area: ['500px', '150px'],
    btnAlign: 'c',
    yes: function(index, layero){
        // 获取文本框输入的值
        var value = layero.find(".layui-layer-input").val();
        if (value) {
            alert("输入值为:" + value);
            layer.close(index);
        } else {
            alert("输入值为空!");
        }
    }
});

说明:以上弹出的文本框是layer自带的,根据formType指定的,如果自己绑定文本框则可如下尝试:

layer.prompt({
	formType: 2,//这里依然指定类型是多行文本框,但是在下面content中也可绑定多行文本框
	title: '是否确信将账号临时挂账?',
	area: ['300px', '100px'],
	btnAlign: 'c',
	content: `<div><p>备注:</p><textarea name="txt_remark" id="remark" style="width:200px;height:80px;"></textarea></div>`,
	yes: function (index, layero) {
		var value1 = $('#remark').val();//获取多行文本框的值
		alert('您刚才输入了:' + value1);
		//可执行确定按钮事件并把备注信息(即多行文本框值)存入需要的地方
    }
});

你可能感兴趣的:(layui,layui)