vue中单选框与多选框的实现与美化

我们在做一些页面时，可能会用到很多的单选框和复选框，但是原生的radio和checkbox前面的原型图标或方框样式不尽人意。于是，决定自己来实现单选框和复选框。我用的是vue，所以就用vue的方式实现单选和复选框。

下面来看一下单选框的实现：

template

        <!-- 单选框 -->
        <span class="selfRadio" @click="clickRadio(1)">
            <span class="selfRadioImgBox">
                <img v-show="radioVal==1" src="../assets/img/checked.png" alt="选中图标">
                <img v-show="radioVal!=1" src="../assets/img/noCheck.png" alt="未选中图标">
            </span>
            单选框
        </span>
        <span class="selfRadio" @click="clickRadio(2)">
            <span class="selfRadioImgBox">
                <img v-show="radioVal==2" src="../assets/img/checked.png" alt="选中图标">
                <img v-show="radioVal!=2" src="../assets/img/noCheck.png" alt="未选中图标">
            </span>
            单选框
        </span>

style

        .selfRadio{
            cursor: pointer;
            .selfRadioImgBox img{
                width:18px;
                height:18px;
            }
            .selfRadioText{
                margin-left:10px;
            }
        }

data

        radioVal:0,

methods

        clickRadio(val){
            if(this.radioVal==val){
                this.radioVal=0;
            }else{
                this.radioVal=val;
            }
        }

单选框的实现，主体思想是，我们自己选两张图片，用v-show来控制其显示或隐藏，这样达到与单选框一样的效果，而且选择框可以根据自己的意愿来换。

 下面来看一下多选框的实现：

data：

        checkBoxArr:[
                {
                    text:'多选框1',
                    selectStatus:0
                },
                {
                    text:'多选框2',
                    selectStatus:0
                }
            ]

template

        <!-- 多选框 -->
        <span class="selfCheckBox" @click="clickCheckBox(index)" v-for="( item,index) in checkBoxArr" :key="index">
            <span class="selfCkeckImgBox">
                <img v-show="item.selectStatus==1" src="../assets/img/checked.png" alt="选中图标">
                <img v-show="item.selectStatus==0" src="../assets/img/noCheck.png" alt="未选中图标">
            </span>
            <span class="checkBoxText">
                {{ item.text }}
            </span>
        </span>

style

        .selfCheckBox{
            cursor: pointer;
            .selfCkeckImgBox img{
                width:30px;
                height:30px;
            }
            .checkBoxText{
                margin-left:10px;
            }
        }

methods

        clickCheckBox(index){
            if(this.checkBoxArr[index].selectStatus==1){
                this.checkBoxArr[index].selectStatus=0;
            }else{
                this.checkBoxArr[index].selectStatus=1
            }
        }

多选框，控制选择框的样式切换，和单选框是一样的原理，但是单选框只能选一个，而多选框可以选多个，所以在实现多选框时，我们将每个多选框里面都加了个selectStatus属性，用来表示，每个多选框的选中状态。

补充一条：选中样式图片与未选中样式图片，可以自己找，可以去ali图库里下载，想用啥用啥。