hooks useSize返回的值，不会把border的宽度算进去

useSize返回的值，不会把border的宽度算进去

Open liangxiwei opened this issue 2 years ago • 5 comments

项目中需要监听一个组件的宽高变化，而这个组件因为设置了border，发现useSize返回的值不包含border的宽。

目前是自己在返回值上加上border的宽来算的。。版本 V2.10.8

Mar 13 '23 04:03 liangxiwei

使用getBoundingClientRect是可以的，但这个getBoundingClientRect是屏幕宽度，如果外层div的scale有变动会导致这个值跟着变动，这会跟原来的逻辑不一致(原逻辑即便scale有变动，计算出来的宽高还是不变)。

Mar 13 '23 04:03 liangxiwei

@crazylxr useSize 使用 clientWidth/Height 获取的尺寸，只包含 content + padding。是否应该用 offsetWidth/Height 更好（content + padding + scrollbar + border）？

https://stackoverflow.com/questions/22675126/what-is-offsetheight-clientheight-scrollheight

其实我感觉，算上 border 更好些，这个 breaking changes 可以下个大版本引入。

Mar 13 '23 16:03 liuyib

或者我觉着 useSize 可以加个参数，指定内部用 clientXxx/scrollXxx/offsetXxx 中的哪类 API 来获取尺寸

Mar 14 '23 02:03 liuyib

这个问题我先打上 v4 的标签，等开始开发 v4 时会和团队大佬们讨论，是否有必要做这个改动

Mar 21 '23 02:03 liuyib

添加 options 参数支持后，这个问题应该也会被解决，见 issue：https://github.com/alibaba/hooks/issues/2227

Oct 17 '23 15:10 liuyib