父元素宽度改变时没有重新设置父元素的width、height

[nikerck]

我看了一下源码，好像除了初始化后就没有重新获取父元素width和height。我添加一个resize进行更改，你可以看一下

export function initParent(containerRef: Ref<HTMLElement | undefined>) {
  const parentWidth = ref(0)
  const parentHeight = ref(0)

  const upParent = ()=>{
    if (containerRef.value && containerRef.value.parentElement) {
      const { width, height } = getElSize(containerRef.value.parentElement)      
      parentHeight.value = height
      parentWidth.value = width
    }
  }  
  onMounted(() => {
    // if (containerRef.value && containerRef.value.parentElement) {
    //   const { width, height } = getElSize(containerRef.value.parentElement)
    //   parentWidth.value = width
    //   parentHeight.value = height
    // }
    upParent()
    window.addEventListener('resize',()=>{
      requestAnimationFrame(()=>{
        upParent()
      })
    })
  })
  return {
    parentWidth,
    parentHeight
  }
}

通过手动触发resize更新父元素

window.dispatchEvent(new Event('resize'))

[linfeng023]

我看了一下源码，好像除了初始化后就没有重新获取父元素width和height。我添加一个resize进行更改，你可以看一下

export function initParent(containerRef: Ref<HTMLElement | undefined>) {
  const parentWidth = ref(0)
  const parentHeight = ref(0)

  const upParent = ()=>{
    if (containerRef.value && containerRef.value.parentElement) {
      const { width, height } = getElSize(containerRef.value.parentElement)      
      parentHeight.value = height
      parentWidth.value = width
    }
  }  
  onMounted(() => {
    // if (containerRef.value && containerRef.value.parentElement) {
    //   const { width, height } = getElSize(containerRef.value.parentElement)
    //   parentWidth.value = width
    //   parentHeight.value = height
    // }
    upParent()
    window.addEventListener('resize',()=>{
      requestAnimationFrame(()=>{
        upParent()
      })
    })
  })
  return {
    parentWidth,
    parentHeight
  }
}

通过手动触发resize更新父元素

window.dispatchEvent(new Event('resize'))

我使用了这个方法，不起作用

[wcn007]

我在你的基础上改了一下

export function initParent(containerRef: Ref<HTMLElement | undefined>) {
  const parentWidth = ref(0)
  const parentHeight = ref(0)
  const upParent = ()=>{
    if (containerRef.value && containerRef.value.parentElement) {
      const { width, height } = getElSize(containerRef.value.parentElement)      
      parentHeight.value = height
      parentWidth.value = width
    }
  }  
  onMounted(() => {
    upParent();
    const observer = new ResizeObserver(upParent);
    observer.observe(containerRef.value!.parentElement as any)
  })

  return {
    parentWidth,
    parentHeight
  }
}```

[linfeng023]

你的邮件我已收到，尽快给你回复。