我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的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图库里下载,想用啥用啥。
下面是将bootstrap与单复选框结合起来的使用方式,响应式,美化选择框
<template> <div> <!-- 单选框 --> <div class="row"> <div v-for="(item,index) in radioList" :key="index" class="col col-xs-12 col-sm-6 col-md-4"> <input v-show="false" type="radio" name="gender" :value="item.value" :id="item.value" :checked="sex==item.value" @click="clickRadio(item.value)" /> <label :for="item.value"> <div class="imgBox"> <img v-show="sex==item.value" src="../../assets/checked.png" alt="选中"> <img v-show="sex!=item.value" src="../../assets/noCheck.png" alt="未选中"> </div> {{item.label}} </label> </div> </div> <input type="text" v-model="sex"> <hr> <!-- 复选框 --> <div class="row"> <div v-for="item in checkBoxList" :key="item.value" class="col col-xs-12 col-sm-6 col-md-4"> <label> <div class="imgBox"> <img v-show="fruit.includes(item.value)" src="../../assets/checked.png" alt="选中"> <img v-show="!fruit.includes(item.value)" src="../../assets/noCheck.png" alt="未选中"> </div> <input v-show="false" @click="clickCheckBox(item.value)" name="Fruit" type="checkbox" :value="item.value" :checked="fruit.includes(item.value)" /> {{item.label}} </label> </div> </div> <input type="text" :value="fruit.join()"> </div> </template> <script> export default { data(){ return { radioList:[ {value:"男",label:"男"}, {value:"女",label:"女"}, {value:"人妖",label:"人妖"} ], sex:"男", checkBoxList:[ {value:"苹果",label:"苹果"}, {value:"香蕉",label:"香蕉"}, {value:"梨",label:"梨"}, {value:"西瓜",label:"西瓜"} ], fruit:["苹果","香蕉"] } }, methods:{ clickRadio(val){ this.sex=val; }, clickCheckBox(val){ if(this.fruit.includes(val)){ this.fruit.splice(this.fruit.indexOf(val),1); }else{ this.fruit.push(val); } console.log(this.fruit.join()) } } } </script> <style lang="scss" scoped> .imgBox{ width:16px; height:16px; display:inline-block; } .imgBox img{ width:100%; height:100%; } </style>
上图
来源:https://www.cnblogs.com/fqh123/p/10925110.html