vue如何获取通过v-for循环生成的不固定长度的Dom元素尺寸

问题描述:

  1. 需要获取dom元素的长度并且dom元素并没有通过css设置尺寸
  2. 需要获取的dom元素是通过v-for循环出来的
async getLogo () {
      // 请求接口
      const response = await this.$rest
        .get({ url: URL_$.mapping.enterprise })
      const data = response?.data
      if (data) {
        this.images = data
          .filter(item => item.imageId !== null && item.imageId !== '')
          .map(item => `${CONTEXT_PATH}/dcenter/file/id/${item.imageId}`)
        const widthArr = []  // 需要接受通过v-for生成的dom元素的offsetWidth
        this.$nextTick(() => {
          const delay = this.images.length * 3
          this.$refs.img_logo.forEach((item) => {
            const itemParams = new Promise((resolve) => {
              // 需要在dom元素  load之后才能获取到offsetWidth
              item.onload = () => {
                resolve(item.offsetWidth)
              }
            })
              // 把每次返回的宽度  放入到数组中
            widthArr.push(itemParams)
          })
          new Promise(() => {
            Promise.all(widthArr).then((res) => {
              let translateWidth = 0
              res.forEach((item) => translateWidth += item + 20)
              //  把计算出来的尺寸保存到css中
              this.$refs.proFile.style.setProperty('--translate', `${-translateWidth}px`)
              this.$refs.proFile.style.setProperty('--delay', `${delay}s`)
            })
          })
        })
      }
    }

你可能感兴趣的:(vue如何获取通过v-for循环生成的不固定长度的Dom元素尺寸)