Vue2实现自定义样式单选按钮
时间:2023-03-30 17:18:13
CSS
js:data(){return{radio:'1',radios:[{label:'Yes',value:'1',isChecked:true,},{label:'No',value:'2',isChecked:false,},{label:'All',value:'3',isChecked:false,},]}},methods:{check(index){//首先取消所有选中的itemthis.radios.forEach((item)=>{item.isChecked=false;});//然后设置当前点击的item为selectthis.radio=this.radios[index].value;//设置传递值this.radios[index].isChecked=true;console.log(this.radio);}}样式:.radio-box{display:inline-block;位置:相对的;高度:25px;行高:25px;margin-right:5px;}.radio{display:inline-block;宽度:25px;高度:25px;垂直对齐:中间;游标:指针;背景图像:url(../../../common/images/radio.png);背景重复:不重复;background-position:00;}.input-radio{display:inline-block;位置:绝对;不透明度:0;宽度:25px;高度:25px;游标:指针;左:0px;大纲:无;-webkit-appearance:none;}.on{background-position:-25px0;}