vant +vue 单选、复选按钮 改 带边框的单选、复选框 + 单、复选取值

由于vant 中的单选、复选在手机端无 带边框选框的效果 只能自己动手写一个了

为方便查看是否所需，先上效果图

单选

复选

单选代码

<div class="RadioStyle">
   <div class="radioList">
       <input type="radio" name="Storage" id="Radio1" value="1" v-model="radioParam"/>
       <label for="Radio1">本人</label>
       <input type="radio" name="Storage" id="Radio2"  value="2" v-model="radioParam"/>
       <label for="Radio2">父母</label>
       <input type="radio" name="Storage" id="Radio3"  value="3" v-model="radioParam"/>
       <label for="Radio3">配偶</label>
       <input type="radio" name="Storage" id="Radio4"  value="4" v-model="radioParam"/>
       <label for="Radio4">子女</label>
    </div>
 </div>

css

    .RadioStyle input {
        line-height: 30px;
        height: 30px;
        border-radius: 2px;
        display: none
    }
    .RadioStyle label {
        border: 1px solid rgb(175,175,175);
        line-height: 30px;
        height: 30px;
        font-size:14px;
        padding: 0px 20px;
        float: left;
        border-radius: 2px;
        margin: 5px 8px;
        text-align: center;
    }
    .RadioStyle input:checked + label {
        border: 1px solid rgb(254,164,25);
        color: rgb(254,164,25)
    }

单选取值

radioParam 中的值即为单选中value的值，value中的可以自定义

复选代码

<div class="checkboxStyle">
   <div class="checkboxList">
       <input type="checkbox"  id="checkbox1" value="1" v-model="checkedValue"/>
       <label for="checkbox1">XXX</label>
        .
        .
        .
        .
    </div>
 </div>
<div v-for="(item,index) in XXX" :key=index>
    <input type="checkbox"  :id=item.id :value=item.XXX v-model="checkedValue" />
    <label :for=item.id :class=[]>{{item.XXX}}</label>
</div>

css

    .checkboxStyle input {
        line-height: 30px;
        height: 30px;
        border-radius: 2px;
        display: none
    }
    .checkboxStyle label {
        border: 1px solid rgb(175,175,175);
        line-height: 30px;
        height: 30px;
        font-size:14px;
        padding: 0px 20px;
        float: left;
        border-radius: 2px;
        margin: 5px 8px;
        text-align: center;
    }
    .checkboxStyle input:checked  + label{
        border: 1px solid rgb(254,164,25);
        color: rgb(254,164,25)
    }

复选取值

checkedValue中即为复选中的值得集合