时间戳

首页 > 解决方案 > 将EventListener添加到元素clientWidth vue 3

javascript - 将EventListener添加到元素clientWidth vue 3

问题描述

嗨，当组件调整大小时，我正在尝试侦听组件 clientWidth。我想使用喜欢

const myEl = document.querySelector('#myID')

并在 myEl.clientWidth 更改时传递该 myEl 以进行监视。Idk 我找到了一个可组合的功能，当整个屏幕调整大小时我可以看到它，但是当元素大小改变时我不会改变屏幕大小。Idk 如果调整大小有效，或者在使用元素时它是如何工作的。这是一个有效的屏幕调整大小

import { onMounted, onUnmounted, ref } from "vue"
export default function () {
  let width = ref(window.innerWidth)
  const onWidthChange = () => width.value = window.innerWidth
  onMounted(() => window.addEventListener('resize', onWidthChange))
  onUnmounted(() => window.removeEventListener('resize', onWidthChange))
  return { width }
}

我正在尝试类似的东西

import { onMounted, onUnmounted, ref } from "vue"
export default function (el) {
  let elWidth = ref(null)
  function onWidthChange(){
    console.log('HERE')
    elWidth.value = el.clientWidth
  }
  onMounted(() => el.addEventListener('resize', onWidthChange))
  onUnmounted(() => el.removeEventListener('resize', onWidthChange))
  return { elWidth }
}

并使用它在组件中传递 myEl

const myEl = ref(null)
onMounted(() => {
  myEl.value = document.querySelector("#myEl")
  const { elWidth } = useElementWidth(myEl.value)
  watch(() => elWidth.value,
    (wid) => {
       if(wid){
         console.log('widEL', wid )
       }
     },
  })
})

也不需要可组合。如果我能看到这个 clientWidth 那就太好了

标签： javascriptvue.jsaddeventlistenervuejs3watch

解决方案

我不是 resizeObsever 方面的专家，但我认为这样的组件对我有用。不声称完美，但它为我的目的工作..随时改进它。并且 idk 如果在每个浏览器中都可以使用，或者如果在 chrome 中可以使用，那么对我来说很好，但没有测试一切

import { onUnmounted, ref } from "vue"
export default function () {
  const elWidth = ref(0)
  const theEl = ref(null)
  const useElID = ref(null)
  function mountObserver(elID){
    useElID.value = elID
    console.log('elWidtMounted', elID)
    theEl.value = document.querySelector(elID)
    ro.observe(theEl.value);
  }
  onUnmounted(() => {
    console.log('elWidtUnMounted', useElID.value)
    ro.unobserve(theEl.value)
  })
  const ro = new ResizeObserver(entries => {
    console.log('Size changed', entries);
    for (let entry of entries) {
      console.log('Size changed e', entry);
      const width = entry.contentRect.width
      elWidth.value = width
    }
  });
  return { elWidth, mountObserver }
}

推荐阅读