效果

先看下我通过生成随机颜色并动态设置伪元素样式完成的标签云效果

获取随机数

row是生成的数量，我这里直接根据标签的个数生成的。获取完标签之后调用getColor即可。

            getColor() {
                var row = this.tags.length
                var ColorCharacter = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
                for (var i = 0; i < row; i++) {
                    var HomeNumber = "#"
                    for (var j = 0; j < 6; j++) {
                        var NumberRand = Math.floor(Math.random() * 16)
                        HomeNumber += ColorCharacter[NumberRand]
                    }
                    this.colorString[i]=HomeNumber
                }
            },

动态设置

通过动态绑定style，声明css变量"--tagColor"，把变量”color”赋给“--tagColor”

<view class="tag" :style="{ '--tagcolor':colorString[index] }" v-for="(item,index) in tags" :key="index" @click="toSearch(item.tagname)">
            {{item.tagname}}
</view>

在css中使用 var函数 读取“--bgColor”变量

    .tag::before {
        width: 10px;
        height: 5px;
        border-radius: 100%;
        position: absolute;
        background-color: var(--tagcolor);
        box-shadow: inset 1px 1px 3px -1px #fff;
        content: '';
        top: 10%;
        left: 5%;
        border-radius: 3px;
        transition: 4s;
    }