手写多选按钮，限制选择数量为两个

工作业务遇到需求6选2，多选取消第一个。elementUI中提供的多选不适用，所以自己用js写了一个组件，在此记录一下

html业务代码

  <div class="title_tow">6送2</div>
      <div class="select" v-for="(item, index) in welfareList" :key="index">
        <div class="select_left">
          <img :src="item.img" alt="" />
          <span>{{ item.name }}</span>
        </div>
        <div class="checkbox">
          <el-checkbox
            size="medium"
            v-model="item.selected"
            @change="handleCheckboxChange(item)"
          ></el-checkbox>
        </div>
      </div>

js相关代码

export default {
  name: "PcWebCoupons",

  data() {
    return {
      selectList: [],
      welfareList: [
        {
          value: "1",
          name: "英国授权代表",
          checked: false,
          selected: false,
          img: image2,
        },
        {
          value: "2",
          name: "欧盟授权代表",
          checked: false,
          selected: false,
          img: image4,
        },
        {
          value: "3",
          name: "英国VAT（转代理）",
          checked: false,
          selected: false,
          img: image2,
        },
        {
          value: "4",
          name: "德国VAT（新注册）",
          checked: false,
          selected: false,
          img: image3,
        },
        {
          value: "5",
          name: "德国VAT（转代理）",
          checked: false,
          selected: false,
          img: image3,
        },
        {
          value: "6",
          name: "欧盟能效标签",
          checked: false,
          selected: false,
          img: image1,
        },
      ],
    };
  },

  methods: {
    handleCheckboxChange(e) {
       const selectedName = e.name;
      if (this.selectList.includes(selectedName)) {
        const index = this.selectList.indexOf(selectedName);
        this.selectList.splice(index, 1);
      } else {
        // 否则，将当前选项添加到选择列表中
        this.selectList.push(selectedName);
      }

      // 如果已经选择的数量超过了3个，则取消第一个选项的选择状态
      if (this.selectList.length >= 3) {
        const firstSelectedName = this.selectList.shift();
        const index = this.welfareList.findIndex(
          (item) => item.name === firstSelectedName
        );
        if (index !== -1) {
          this.welfareList[index].selected = false;
        }
      }
      console.log(this.selectList);
    },
  },
};

哦对了，通常elementUI中的所选框需要修改样式，以下是修改后的css代码

.checkbox {
        // 未选中样式
        /deep/ .el-checkbox__inner {
          width: 16px;
          height: 16px;
          border-radius: 10px;
          color: #4894ff;
          border: 1px solid #4894ff;
          // background-color: #4894ff;
        }
        /deep/ .el-checkbox__inner::after {
          position: absolute;
          height: 8px;
          left: 5px;
        }
      }