vue生成随机大小不重叠圆

最新推荐文章于 2023-09-05 16:21:20 发布

泛起回忆怎么潜

最新推荐文章于 2023-09-05 16:21:20 发布

阅读量1k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_41823320/article/details/117783618

版权

本文介绍如何在Vue项目中生成一组随机大小且不会相互重叠的圆形，探讨了坐标计算和碰撞检测的方法，为UI设计提供了一种动态布局的解决方案。

摘要由CSDN通过智能技术生成

父组件：
 <div class="tags" ref="tags">
      <circle_c
        :parentClientWidth="parentClientWidth"
        :parentClientHeight="parentClientHeight"
        :dataList="dataList"
        :colorList="colorList"
      ></circle_c>
    </div>

<script>
import circle_c from "./circle.vue";
// const parentClientWidth = this.$refs.barparent.clientWidth;
export default {
  components: { circle_c },
  data() {
    return {
      parentClientWidth: 0,
      parentClientHeight: 0,
      dataList: [
        {
          num: 5,
          desc: "在施危大工程",
        },
        {
          num: 10,
          desc: "本月检查总数",
        },
        {
          num: 5,
          desc: "工程部位",
        },
        {
          num: 5,
          desc: "本月隐患总数",
        },
        {
          num: "19%",
          desc: "本月排查重复率",
        },
      ],
      colorList: [
        "rgb(26,117,215)",
        "rgb(119,201,46)",
        "rgb(250,164,28)",
        "rgb(29,199,210)",
        "rgb(26,117,215)",
      ],
    };
  },
  created() {},
  mounted() {
    this.getWidth();
  },
  methods: {
  // 获取父盒子的宽度和高度  
    getWidth() {
      this.parentClientWidth = this.$refs.tags.clientWidth;
      this.parentClientHeight = this.$r