我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的radio和checkbox前面的原型图标或方框样式不尽人意。于是,决定自己来实现单选框和复选框。我用的是vue,所以就用vue的方式实现单选和复选框。
下面来看一下单选框的实现:
template
单选框
单选框
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
{{ item.text }}
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图库里下载,想用啥用啥。
原文:/fqh123/p/10925110.html