vue3生成随机盒子

要在Vue3中生成随机盒子，你可以使用grid布局和随机颜色来实现。首先，在你的template中，你可以使用ul和li标签来创建一个列表，将每个li标签作为一个盒子，然后使用v-for指令遍历一个包含随机颜色的数组。代码如下所示：

<ul class="label_list">
  <li class="label_item" v-for="(item, index) in skillTagArr" :style="{ backgroundColor: item.color }">
    <i class="el-icon-share"></i>{{ item.tag }}
  </li>
</ul>

接下来，在script标签中，你可以添加一个data属性来存储生成的随机颜色数组skillTagArr，并在mounted钩子函数中调用一个方法initTarget来初始化这个数组。在initTarget方法中，你可以将vuex仓库中的数据赋值给skillTagArr，并为每个对象添加一个color属性来存储随机生成的颜色。代码如下所示：

import { mapState } from 'vuex'

export default {
  data() {
    return {
      skillTagArr: [],
    }
  },
  mounted() {
    this.initTarget()
  },
  methods: {
    initTarget() {
      this.skillTagArr = this.personalInfo.tags
      this.skillTagArr.forEach((item) => {
        item.color = this.RandomColor()
      })
    },
    RandomColor() {
      let r, g, b
      r = Math.floor(Math.random() * 256)
      g = Math.floor(Math.random() * 256)
      b = Math.floor(Math.random() * 256)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
  },
  computed: {
    ...mapState(['personalInfo']),
  },
}

最后，你可以在style标签中定义grid-box容器以及盒子的样式。代码如下所示：

<style scoped>
.grid-box {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 20px;
  background-color: #2196F3;
  padding: 10px;
  box-sizing: border-box;
  width: 700px;
  height: 340px;
}

.grid-item {
  background: #ccc;
}

.def-box {
  background: #FFFFFF;
}
</style>

通过以上的代码，你可以在Vue3中生成一个带有随机颜色的盒子网格。每个盒子的颜色都是通过RandomColor方法随机生成的，并且通过v-for指令循环生成。