前端中元素的动态定位相关问题

场景：在vue2中，动态生成下图中的绿色图标，并且他们的位置会根据接口实时变化，是通过 translateY属性来改变，由于要保证位置的准确所以定位是absolute。尝试过relative的定位可以解决堆叠在一块的问题，但表示目标位置的数值会跟随图标数量变化而改变
问题：如果多个图标读取的位置都是某个值，会同时堆叠在一块

想知道在元素都是绝对定位的状态下，数量不固定的兄弟dom之间如何有一定的间隔

生成位置的时候可以先判断一下是否存在相同的位置 如果位置已经有相同的情况下就手动的增加一定像素

建议将相同值进行分组，同组横向排列，但如果有较接近的值，还是会有重叠

<template>
  <div class="wrap">
    <div
      class="item"
      v-for="(item, key, index) in groupList"
      :key="index"
      :style="{top: key + 'px'}">
      <span class="name" v-for="(cItem, cIndex) in item" :key="cIndex">{{ cItem.name }}</span>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      list: [
        { y: 10, name: 'T01' },
        { y: 10, name: 'T02' },
        { y: 50, name: 'T03' },
        { y: 50, name: 'T04' },
        { y: 50, name: 'T05' },
        { y: 70, name: 'T06' },
        { y: 100, name: 'T07' },
        { y: 100, name: 'T08' }
      ],
      groupList: {}
    }
  },
  created () {
    this.formatList()
  },
  methods: {
    formatList () {
      const groupList = this.list.reduce((acc, currentValue) => {
        const key = currentValue.y
        if (!acc[key]) {
          acc[key] = []
        }
        acc[key].push(currentValue)
        return acc
      }, {})
      this.groupList = groupList
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  position: relative;
  .item {
    position: absolute;
    left: 0;
    .name + .name {
      margin-left: 6px;
    }
  }
}
</style>

【以下回答由 GPT 生成】

答案如下：

在Vue.js中实现动态生成并实时变化位置的图标元素的间隔，你可以使用Vue的循环指令v-for来动态生成图标元素，并通过计算属性或者watch监听数据的变化来实时改变它们的位置。

首先，在vue实例中定义一个数组icons来存储接口返回的图标数据，例如:

data() {
  return {
    icons: [] // 存放接口返回的图标数据
  }
}

然后，使用v-for指令将icons数组中的每个图标元素动态地生成为具体的图标元素，并设置其定位属性为absolute。

<template>
  <div>
    <div v-for="(icon, index) in icons" :key="index" class="icon" :style="{ top: icon.top + 'px' }"></div>
  </div>
</template>

接下来，为每个图标元素添加一定的间隔，可以通过为图标元素的样式添加margin属性来实现。在此例中，我们可以使用计算属性或者watch监听icons数组的变化，计算每个图标元素的top值，并根据数量动态计算间隔。

computed: {
  iconStyle() {
    return {
      margin: `10px 0` // 通过计算属性设置图标之间的间距
    }
  }
}

最后，在样式中，为图标元素的类别添加一些样式, 如设置宽高和背景色等。

<style>
.icon {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #ccc;
}
</style>

这样，当接口返回的图标数据发生变化时，图标元素会动态生成，并且它们的位置会实时变化，并保持图标之间的一定间隔。

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7497692