根据不同汉字随机背景色

PainLesss

已于 2023-01-14 01:58:59 修改

阅读量154

点赞数

于 2023-01-14 01:57:02 首次发布

本文链接：https://blog.csdn.net/weixin_57541273/article/details/128681687

版权

Vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 1 订阅

订阅专栏

比如用文字做头像的列表，给同名字相同背景色，不同名字不同背景色。

    color (name) {
      let num = ''
    //循环人名前两位，把汉字转换成字符的 Unicode 编码，生成10位数字
      for (let i = 0; i < 2; i++) {
        num += parseInt(name[i].charCodeAt(0), 10)
      }
    //经过尝试，使用rgb格式颜色，手动固定R色值，给G和B值随机，最容易控制出想要的色彩
    //取任意两位数字X2,让颜色尽可能拉开差距，并保证不超过255
      return 'rgb(80,' + (num.slice(3, 5) * 2) + ',' + (num.slice(6, 8) * 2) + ')'
    },


  //VUE调用方法
        <div
          v-for="item in items"
          style="color: #fff;border-radius:50%;width: 32px;height: 32px;display:block;text-align: center;line-height: 32px;font-size: 12px;transform: scale(0.88)"
          :style="`background:${color(item)}`"
        >
          {{ item.substr(-2,2)}}
        </div>