jQuery的dialog如何重新自适应

Question

jQuery的dialog如何重新自适应
正常点开很正常，但是如果里面的select选择栏过长，就会出显滑动栏，如果能点击select选择栏后dialog重新自适应宽度，然后不再出现滑动条(高度其实还无所谓，主要是宽度)

Answer 1

layUI初始化过select的UI，显示的非原生select，用下面代码监控下layUI打开关闭即可

        const observer = new MutationObserver((mutationsList, observer) => {
            var mutation = mutationsList.find(i => i.target.classList.contains('layui-form-select'));
            if (!mutation) return;
            var target = mutation.target;
            if (!$(target).is(':visible')) return;
            var pop = $(target).find('.layui-anim-upbit');
            var dialog = pop.closest('.ui-widget-content');
            if (pop.is(':visible')) {//打开
                console.log('open')
                var scrollWidth = dialog.prop('scrollWidth');

                var clientWidth = dialog.prop('clientWidth');

                if (scrollWidth > clientWidth) {//出现滚动条，需要调整对话框宽度
                    dialog.dialog('option', 'width', scrollWidth + 30)//需要加上dialog的padding，border

                }
            }
            else {//关闭，设置宽度为默认的400
                console.log('close')
                dialog.dialog('option', 'width', '400px')
            }
        });
        //监控2个弹出层属性更改
        observer.observe(document.querySelector('#createWork'), { attributes: true, childList: true, subtree: true })
        observer.observe(document.querySelector('#updateWork'), { attributes: true, childList: true, subtree: true })