layui设置按钮不可点击_layui upload 模块点击选择文件按钮的禁用与启用功能

要求使用场景:在不刷新页面的情况下根据动态逻辑条件判断点击选择文件按钮时是否起作用,如果符合条件,点击按钮时系统就弹出选择文件框,如果不符合点击时就没反应。

经过分析与实现总结如下:

而实际上 upload 模块没有这种功能,只能在打开或刷新页面时进行判断 render() 不 render(),这么着并不是很灵活。

禁用:也就是 ’按钮节点对象‘.off();(基于 jq),这样的话,由 upload.render() 初始化时绑定的 click、dragleave、dragover、drop、upload 事件都会被解绑,所以再点按钮也无用,就相当于禁用。

启用:经分析源码发现,作者为了防止重复绑定事件就在 render() 的 events 事件方法中给按钮节点上设置了 data 属性,key 是 haveEvents 值是 true,当重新 render() 的时候,会判断按钮节点上 haveEvents 的值如果为真就 return 了,不再执行 on click、dragleave、dragover、drop 这几个事件了。

总结:所以重新启用的方法是,在禁用或启用的逻辑里把按钮节点的 data haveEvents 值设置成 false 就ok了。

先分析源码:(片断)

//手动触发上传

options.bindAction.off('upload.action').on('upload.action', function() {

that.upload();

});

//防止事件重复绑定

if (options.elem.data('haveEvents')) return;

that.elemFile.on('change', function() {

$(this).trigger('upload.change');

});

options.elem.on('click', function() {

if (that.isFile()) return;

$(this).trigger('upload.start');

});

if (options.drag) {

options.elem.on('dragover', function(e) {

e.preventDefault();

$(this).trigger('upload.over');

}).on('dragleave', function(e) {

$(this).trigger('upload.leave');

}).on('drop', function(e) {

e.preventDefault();

$(this).trigger('upload.drop', e);

});

}

options.bindAction.on('click', function() {

$(this).trigger('upload.action');

});

options.elem.data('haveEvents', true);

重点是这 if (options.elem.data('haveEvents')) return; 句..,options.elem 是 render() 时所绑定的按钮节点,所以以下解决方法:

if(true){

//启用(实际就是重新渲染)

upload.render({...})

} else {

//禁用

$('.uploadButton').off().data('haveEvents', false);

}

再判断的时候条件如果为真,再渲染的话,因为 haveEvents 的值变成了 false,所以下面的代码会执行,click 事件什么就会重新绑定(不是重复),所以就实现了启用与禁用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值