vue中$ref作用于普通标签上,会返回dom元素,如何获取该元素的所有属性

98 阅读1分钟

vue中$ref作用于普通标签上,会返回dom元素

作用于组件会返回组件实例。

对于作用于普通标签上的情况,如何获得类似于组件实例返回的对象

    <div ref="contentRef" class="content">
      <div class="propress" v-for="(item, index) in statistical" :key="index">
        <div>
          <span class="sort">{{ index + 1 }}</span>
          <span>{{ item.dataType }}</span>
          <span class="amount">{{ item.count }}次</span>
        </div>
      </div>
    </div>
    //互动行为统计ref
    const contentRef = ref(null)
    //展开收起 过度动画
    const zk = async () => {
      state.expand = !state.expand
      await nextTick()
      let obj = {} //获取dom对象
      for (let i in contentRef.value) {
        obj[i] = contentRef.value[i]
      }
    }

通过for in 遍历contentRef.value中的所有属性,新建对象进行写入操作.不能用Object.keys(),该方法会自动过滤掉原型链上的属性,导致返回的数组为空