将EventListener添加到元素clientWidth vue 3答案

【问题标题】：addEventListener to element clientWidth vue 3将EventListener添加到元素clientWidth vue 3
【发布时间】：2021-07-24 17:10:23
【问题描述】：

您好，当组件调整大小时，我正在尝试侦听组件 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 那就太好了

【问题讨论】：

您可能想使用ResizeObserver。

标签： javascript vue.js addeventlistener vuejs3 watch

【解决方案1】：

我不是 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 }
}

【讨论】：