列表项随机匹配不同颜色字体和背景

2023-12-26 20:04:07

不同颜色字体和背景的列表效果实现

实现效果图
想实现如下图效果,列表每一项的icon标识颜色不一样

代码如下:

<div
    class="group-item"
    v-for="(item,index) in groupLists"
    :key="index"
    @click="groupClickHandler(item)"
>
    <div class="icon-div">
        <j-icon type="ellipsis2" color="#888"></j-icon>
        <ul>
            <li @click.stop="openModal('edit',item.id)">编辑</li>
            <li @click.stop="delGroup(item.id)">删除</li>
        </ul>
    </div>
    <div class="group-img" :style="itemStyle(index)">
        {{ item.name.slice(0,1) }}
    </div>
    <div>
        <p class="name">{{ item.name }}</p>
        <p class="owner">创建者:{{ item.owner }}</p>
    </div>
</div>
data() {
   return {
       colorArr: [
         {
             color: '#F54A44',
             backgroundColor: '#FFE3E2',
         },
         {
             color: '#407BF5',
             backgroundColor: '#E1EAFD',
         },
         {
             color: '#F2A517',
             backgroundColor: '#FFF2DB',
         },
         {
             color: '#77DF7A',
             backgroundColor: '#DBFCDC',
         },
         {
             color: '#40B4F5',
             backgroundColor: '#DDF3FF',
         },
     ],
   }
},
computed:{
  // 计算属性用于返回每个 group-item 的样式
  itemStyles() {
     return this.groupLists.map((item, index) => {
          const randomColor = this.colorArr[(index + this.randomOffset) % this.colorArr.length];
          return {
              backgroundColor: randomColor.backgroundColor,
              color: randomColor.color,
          };
     });
   },
   // 计算一个随机偏移量,以确保颜色的唯一性
   randomOffset() {
      return Math.floor(Math.random() * this.colorArr.length);
   },
},
methods:{
   // 返回每个 group-item 的样式
   itemStyle(index) {
       return this.itemStyles[index];
   },
}

文章来源:https://blog.csdn.net/xiaomao_wxj/article/details/135228976
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。