我们在做一些页面时, 可能会用到很多的单选框和复选框, 但是原生的 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>
单选框
- class="selfRadio" @click="clickRadio(2)">
- class="selfRadioImgBox">
- v-show="radioVal==2" src="../assets/img/checked.png" alt="选中图标">
- v-show="radioVal!=2" src="../assets/img/noCheck.png" alt="未选中图标">
单选框
- 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 图库里下载, 想用啥用啥.
来源: http://www.bubuko.com/infodetail-3071918.html