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(),该方法会自动过滤掉原型链上的属性,导致返回的数组为空