vue 生成随机颜色 列表 随机背景色

1、不指定颜色，通过rgb赋值

<el-row :gutter="20">
     <el-col :sm="12" :md="8" :lg="4" :xl="4" :xxl="4" v-for="(item,i) in 13" :key="i">
         <div :style="randomRgb()" class="acess_item">{{ item }}</div>
     </el-col>
 </el-row>

data() {
        return {
            randomRgb(item) {
               let R = Math.floor(Math.random() * 130 110);
                let G = Math.floor(Math.random() * 130 110);
                let B = Math.floor(Math.random() * 130 110);
                console.log(R,G,B)
                return {
                    background: 'rgb('   R   ','   G   ','   B   ', .5)'
                };
            },
        }

2、指定颜色组中，渐变背景色

data() {
        return {
            randomRgb(item) {
                let colorList = [
                    "linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%)",
                    "linear-gradient(120deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%)",
                    "linear-gradient(120deg, #3D4E81 0%, #5753C9 48%, #6E7FF3 100%)",
                    "linear-gradient(120deg, #209cff 0%, #68e0cf 100%)",
                    "linear-gradient(120deg, #96deda 0%, #50c9c3 100%)",
                    "linear-gradient(120deg, #007adf 0%, #00ecbc 100%)",
                    "linear-gradient(120deg, #6a11cb 0%, #2575fc 100%)"
                ]
                let index = Math.floor(Math.random()*colorList.length)
                return {
                    backgroundImage: colorList[index]
                };
            },
           }

3、指定颜色组中，纯背景色

data() {
        return {
            randomRgb(item) {
               let colorList = [
                    "#87CEFF", "#5CACEE", "#63B8FF", "#7EC0EE", "#A4D3EE", "#C6E2FF", "#B9D3EE"
                ]
                let index = Math.floor(Math.random()*colorList.length)
                return {
                    // backgroundImage: colorList[index]
                    backgroundColor: colorList[index]
                };
            },
      }

这篇好文章是转载于：学新通技术网