hellodigua / vue-danmaku

基于 Vue 的弹幕交互组件 | A danmaku component for Vue
https://hellodigua.github.io/vue-danmaku
MIT License
620 stars 60 forks source link

父组件resize后弹幕组件内的containerWidth 跟 containerHeight不会改变 #47

Closed sanqi377 closed 1 year ago

sanqi377 commented 1 year ago

问题

父组件resize后弹幕组件内的containerWidth 跟 containerHeight不会改变,导致弹幕绘制位置不正确,css left错误

代码实现

image image

一般是不会有这个问题的,我们业务出这个问题是因为大屏自适应,在父级加了 zoom 后会改变组件的 offsetWidth 跟 offsetHeight。导致绘制的位置不对。

环境

sanqi377 commented 1 year ago

解决方案:

let resizeObserver: ResizeObserver;

        onMounted(() => {
            const dom = container.value;
            resizeObserver = new ResizeObserver(() => {
                initCore();
            });
            resizeObserver.observe(dom, { box: "border-box" });
            init();
        });

        onBeforeUnmount(() => {
            clear();
            resizeObserver.disconnect();
        });
hellodigua commented 1 year ago

感谢,v1.5.0已更新这部分代码