vue3.0动态循环icon点击变色，再次点击取消选中

先看效果图

点击后发生改变

开始上代码
html部分

        <div class="left-circle">
          <div class="whole-circle" ref="wholeCircle"></div>
          <div class="whole-list">
            <ul>
              <li v-for="(item, index) in newArr" :key="index">
                <div
                  class="icon"
                  :class="{ iconactived: spanIndex.indexOf(index) > -1 }"
                  :style="{ background: item.text }"
                  @click="changeCicle(item, index)"
                ></div>
                <span class="name">{{ item.name }}</span>
                <span class="value">{{ item.value }}</span>
                <span class="unit">单 <span>|</span></span>
                <span class="type">{{ item.type }}</span>
              </li>
            </ul>
          </div>
        </div>

css部分代码

      .left-circle {
        display: flex;
        padding-left: 92px;
        .whole-circle {
          width: 60%;
          height: 100%;
        }
        .whole-list {
          width: 40%;
          height: 100%;
          ul {
            li {
              display: flex;
              align-items: center;
              padding: 20px 10px;
              span {
                margin: 0 10px;
              }
              .icon {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                cursor: pointer;
              }
              .iconactived {
                background: #cccccc !important;
              }
              .name {
                font-size: 22px;
                font-weight: 500;
                color: #3aaeff;
              }
              .value {
                font-size: 38px;
                font-weight: bold;
                color: #ffffff;
              }
              .type {
                color: #00d9ff;
                font-size: 30px;
                font-weight: bold;
              }
              .unit {
                display: flex;
                margin: 0;
                font-size: 22px;
                font-weight: 300;
                color: #ffffff;
                span {
                  opacity: 0.3;
                  margin: 0 2px;
                }
              }
            }
          }
        }
      }

vue3.0JS部分关键代码
关于ref这个响应式引用可以看官网带 ref 的响应式变量

import { ref } from "vue";  //需要引入ref相应变量

  setup() {
    const wholeCircle = ref(null);
    const isactive = ref(0); //选中切换的名字
    const spanIndex = ref([]); //选中icon的数组
    const dataList = [
      { value: 758, name: "付款", type: "30%" },
      { value: 425, name: "接单", type: "20%" },
      { value: 565, name: "发货", type: "10%" },
      { value: 6452, name: "揽收", type: "15%" },
      { value: 4905, name: "签收", type: "6%" },
      { value: 547, name: "撤单", type: "4%" }
    ];
    const color = [
      { text: "#52ca8d" },
      { text: "#06bdf6" },
      { text: "#116fee" },
      { text: "#6e68fd" },
      { text: "#9229fd" },
      { text: "#fdac50" }
    ];
    const newArr = dataList.map((item, index) => {
      return { ...item, ...color[index] };
    });
    let arr = [...newArr];

    const changeCicle = (item, index) => {
      let arrIndex = spanIndex.value.indexOf(index);
      if (arrIndex > -1) {
        spanIndex.value.splice(arrIndex, 1);
        arr.splice(index, 0, item);
      } else {
        spanIndex.value.push(index);
        arr = arr.filter(res => {
          return res.name != item.name;
        });
      }
      
      //let myChart = echarts.init(wholeCircle.value);
      //let bar = orderEcharts.wholeCircle(arr);
      //myChart.setOption(bar);
    };

    return {
      wholeCircle,
      dataList,
      isactive,
      newArr,
      changeCicle,
      spanIndex
    };
  }