Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
githubcopilot12 opened this issue Feb 28, 2023 · 2 comments

Comments

@githubcopilot12
Copy link

No description provided.

@nikerck
Copy link

nikerck commented Jan 25, 2024

我看了一下源码,好像除了初始化后就没有重新获取父元素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
Copy link

我看了一下源码,好像除了初始化后就没有重新获取父元素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'))

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants