fix(form-select): checked 属性设置为非 boolean 类型的值时,UI 更新异常 (#2033)

* fix(form-select): 改进自动更新 UI

* chore:更新注释
This commit is contained in:
morning-star 2024-06-23 12:24:29 +08:00 committed by GitHub
parent d8441faa38
commit 673dd19b34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 11 deletions

View File

@ -870,20 +870,20 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}); });
}); });
that.syncAppearanceOnPropChanged(this, 'checked', function(isChecked){ that.syncAppearanceOnPropChanged(this, 'checked', function(){
if(isSwitch){ if(isSwitch){
var title = (reElem.next('*[lay-checkbox]')[0] var title = (reElem.next('*[lay-checkbox]')[0]
? reElem.next().html() ? reElem.next().html()
: check.attr('title') || '' : check.attr('title') || ''
).split('|'); ).split('|');
reElem.children('div').html(isChecked ? title[0] : title[1] || title[0]); reElem.children('div').html(this.checked ? title[0] : title[1] || title[0]);
} }
reElem.toggleClass(RE_CLASS[1], isChecked); reElem.toggleClass(RE_CLASS[1], this.checked);
}); });
if(isPrimary){ if(isPrimary){
that.syncAppearanceOnPropChanged(this, 'indeterminate', function(isIndeterminate){ that.syncAppearanceOnPropChanged(this, 'indeterminate', function(){
if(isIndeterminate){ if(this.indeterminate){
reElem.children('.layui-icon-ok').removeClass('layui-icon-ok').addClass(CLASS.SUBTRA); reElem.children('.layui-icon-ok').removeClass('layui-icon-ok').addClass(CLASS.SUBTRA);
}else{ }else{
reElem.children('.'+ CLASS.SUBTRA).removeClass(CLASS.SUBTRA).addClass('layui-icon-ok'); reElem.children('.'+ CLASS.SUBTRA).removeClass(CLASS.SUBTRA).addClass('layui-icon-ok');
@ -985,8 +985,8 @@ layui.define(['lay', 'layer', 'util'], function(exports){
}); });
}); });
that.syncAppearanceOnPropChanged(this, 'checked', function(isChecked){ that.syncAppearanceOnPropChanged(this, 'checked', function(){
if(isChecked){ if(this.checked){
reElem.addClass(CLASS + 'ed'); reElem.addClass(CLASS + 'ed');
reElem.children('.layui-icon').addClass(ANIM + ' ' + ICON[0]); reElem.children('.layui-icon').addClass(ANIM + ' ' + ICON[0]);
}else{ }else{
@ -1079,7 +1079,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
* checkbox radio 指定属性变化时自动更新 UI * checkbox radio 指定属性变化时自动更新 UI
* @param {HTMLInputElement} elem - HTMLInput 元素 * @param {HTMLInputElement} elem - HTMLInput 元素
* @param {'checked' | 'indeterminate'} propName - 属性名 * @param {'checked' | 'indeterminate'} propName - 属性名
* @param {(newValue: boolean, oldValue: boolean) => void} handler - 定义如何更新 * @param {() => void} handler - 属性值改变时执行的回调
* @see https://learn.microsoft.com/zh-cn/previous-versions//ff382725(v=vs.85)?redirectedfrom=MSDN * @see https://learn.microsoft.com/zh-cn/previous-versions//ff382725(v=vs.85)?redirectedfrom=MSDN
*/ */
Form.prototype.syncAppearanceOnPropChanged = function(elem, propName, handler){ Form.prototype.syncAppearanceOnPropChanged = function(elem, propName, handler){
@ -1095,7 +1095,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var oldValue = this[propName]; var oldValue = this[propName];
originProps.set.call(this, newValue); originProps.set.call(this, newValue);
if(oldValue !== newValue){ if(oldValue !== newValue){
handler(newValue, oldValue); handler.call(this);
} }
} }
}) })

View File

@ -1797,7 +1797,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var index = this.getAttribute('data-index'); var index = this.getAttribute('data-index');
if(!ignoreTrIndex[index]){ if(!ignoreTrIndex[index]){
var el = $(this); var el = $(this);
el.toggleClass(ELEM_CHECKED, getChecked(thisData[index][options.checkName])) el.toggleClass(ELEM_CHECKED, !!getChecked(thisData[index][options.checkName]))
} }
}); });
}else if(isCheckMult){ }else if(isCheckMult){
@ -1805,7 +1805,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
var index = this.getAttribute('data-index'); var index = this.getAttribute('data-index');
if(opts.index[index] && !ignoreTrIndex[index]){ if(opts.index[index] && !ignoreTrIndex[index]){
var el = $(this); var el = $(this);
el.toggleClass(ELEM_CHECKED, getChecked(thisData[index][options.checkName])) el.toggleClass(ELEM_CHECKED, !!getChecked(thisData[index][options.checkName]))
} }
}); });
} }