vue+ts实现带ABCD的单选和多选功能

前言

因业务需求，需要做一个带ABCD的单选框和多选框功能。问题：有什么办法能够快速实现其样式和功能，并且性能良好。首先第一时间想到是是框架。所以我找了element、view、antd这三个框架尝试着改它们的样式来实现效果。但改的过程中发现了问题，
这三个框架的选择框都是使用伪元素实现的，如果想要改变它们的选中状态需要层层获取它们的伪元素（选中前和选中后），操作起来挺麻烦的，后期维护也不方便，所以最后只能放弃。

既然框架不得行，那我们就自己手动写一个。

实现方式

单选框

思路：手动编写单选题选中时的样式，当选中其中一个值时动态给其添加样式，其他选项样式去除。

css

/**
      单选框多选框样式测试写在这
    */
    .testRadio, .testCheckBox{
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      i{
        display: block;
        width: 25px;
        height: 25px;
        line-height: 25px;
        color: #bcbcbc;
        font-size: 18px;
        font-style: normal;
        text-align: center;
        border: 1px solid #dcdee2;
        border-radius: 50%;
        margin-right: 5px;
      }
      .active{
        color: #fff;
        background: #6D72FF;
      }
      .rightImg{
        width: 25px;
        height: 25px;
        margin-right: 5px;
      }
      span{
        display: block;
      }
    }
  }

HTML

<!-- 单选题测试 -->
        <div class="testRadio" v-for="(item, index) in contentText" :key="index" @click="changRadio(item, index)">
            <i :class = "isActive === index ? 'active' : ''">{{item.name}}</i>
            <!-- 回显时使用的答案对错图片 -->
            <!-- <img class="rightImg" src="@assets/images/right.png" alt="">
            <img class="rightImg" src="@assets/images/err.png" alt=""> -->
            <span>{{item.text}}</span>
        </div>

js

// 此处为公共数据源
isActive: boolean = false;
  contentText: any = [
    {
      index: 0,
      id: 5,
      name: 'A',
      text: '早饭'
    },
    {
      index: 1,
      id: 6,
      name: 'B',
      text: '午饭'
    },
    {
      index: 2,
      id: 7,
      name: 'C',
      text: '晚饭'
    },
    {
      index: 3,
      id: 8,
      name: 'D',
      text: '宵夜'
    },
  ];
  checkboxList: any = []; // 测试多选题 

思路：单选框点击时，根据它点击的索引动态地给其添加样式名

// 单选框点击方法
changRadio(item: any, index: any){
    console.log('item', item, index);
    this.isActive = index
  }

效果图

多选框

HTML

<!-- 多选题测试 -->
        <div class="testCheckBox" v-for="(item, index) in contentText" :key="item.id" @click="changeCheckBox(item, index)">
            <i :class = "{active:checkboxList.indexOf(item) != -1}">{{item.name}}</i>
            <!-- <img class="rightImg" src="@assets/images/right.png" alt="">
            <img class="rightImg" src="@assets/images/err.png" alt=""> -->
            <span>{{item.text}}</span>
        </div>

思路：创建一个新的　checkboxList　空数组用来存放被点击的数据，当你点击对应的选项时，先检索这个新建的数组里面是否存在该选项，若该选项已存在则清除所点击的选项，若不存在就把它ｐｕｓｈ到新建的数组里面，作为一个被选中的选项显示。

// 复选框点击方法
changeCheckBox(item: any, index: any){
    if (this.checkboxList.indexOf(item) !== -1) {
      this.checkboxList.splice(this.checkboxList.indexOf(item), 1) //取消
    } else {
      this.checkboxList.push(item) //选中添加到数组里
    }
  }

效果图

提示

若想把选中的效果改成✔或者打叉的效果，可以把＜ｉ＞标签改成下面的＜ｉｍｇ＞标签，用图片代替。

总结

市面上的UI框架固然好用，但也存在部分缺点，比如文档说明少、不清楚，修改框架本身的内容不方便，嵌套太深，而且难以维护。这是换个角度思考问题，可以自己写一个或者封装一个组件出来，或许没有你所想象中的那么困难呢。