如何获取左侧元素之间的距离 vue的写法 不使用refs 和id 和class

可以使用 $refs 来获取元素的距离，但是如果不想使用 $refs、id 或 class，可以使用 $el 获取当前组件的元素，然后使用 DOM API 来获取元素的距离。具体代码如下：

<template>
  <div>
    <div ref="item1">Item 1</div>
    <div ref="item2">Item 2</div>
    <div ref="item3">Item 3</div>
  </div>
</template>

<script>
export default {
  mounted() {
    const item1Left = this.$refs.item1.$el.getBoundingClientRect().left;
    const item2Left = this.$refs.item2.$el.getBoundingClientRect().left;
    const item3Left = this.$refs.item3.$el.getBoundingClientRect().left;
    const distance = item2Left - item1Left;

    console.log(`The distance between item1 and item2 is: ${distance}px`);
  },
};
</script>

在这个例子中，我们使用 $refs 获取了三个元素，然后通过 $el 获取了它们的 DOM 元素。使用 getBoundingClientRect() 方法可以获取元素的位置信息，包括 left、top、width、height 等属性。最后计算出了 item1 和 item2 之间的距离。