js实现固定区域内的不重叠随机圆

在Vue中实现在某一区域中多个元素随机定位显示且不重叠的一种比较简单的方法是使用CSS中的`position: absolute`属性和JavaScript中的随机数生成函数。具体实现步骤如下： 1. 在Vue的模板中，定义一个容器元素，设置其样式为`position: relative`，表示其内部的元素都是以该容器为基准进行绝对定位。 ```html <template> <div class="container"> <div class="box" v-for="(item, index) in items" :key="index">{{ item }}</div> </div> </template> <style> .container { position: relative; width: 500px; height: 300px; border: 1px solid #ccc; } .box { position: absolute; width: 50px; height: 50px; background-color: #f00; color: #fff; text-align: center; line-height: 50px; } </style> ``` 2. 在Vue的`data`中定义一个数组`items`，存储要显示的元素。 ```javascript export default { data() { return { items: ['A', 'B', 'C', 'D', 'E'] } } } ``` 3. 在Vue的`mounted`生命周期函数中，使用JavaScript中的`Math.random()`函数生成随机的`left`和`top`值，将每个元素进行定位，并检测是否与其他元素重叠，若重叠则重新生成随机位置，直到不重叠为止。 ```javascript export default { mounted() { const boxes = this.$el.querySelectorAll('.box') const containerRect = this.$el.getBoundingClientRect() const boxRects = Array.from(boxes).map(box => box.getBoundingClientRect()) for (let i = 0; i < boxes.length; i++) { let left = Math.floor(Math.random() * (containerRect.width - boxRects[i].width)) let top = Math.floor(Math.random() * (containerRect.height - boxRects[i].height)) while (isOverlap(left, top, i, boxRects)) { left = Math.floor(Math.random() * (containerRect.width - boxRects[i].width)) top = Math.floor(Math.random() * (containerRect.height - boxRects[i].height)) } boxes[i].style.left = `${left}px` boxes[i].style.top = `${top}px` } function isOverlap(left, top, index, rects) { for (let i = 0; i < index; i++) { if (left + rects[index].width > rects[i].left && left < rects[i].left + rects[i].width && top + rects[index].height > rects[i].top && top < rects[i].top + rects[i].height) { return true } } return false } } } ``` 4. 在判断是否重叠的函数`isOverlap`中，通过比较当前元素的位置和之前元素的位置，判断是否重叠，若重叠则返回`true`，否则返回`false`。 这样，就实现了在Vue中实现在某一区域中多个元素随机定位显示且不重叠的效果。