在网上找了半天很多都不是很全,这玩意虽然不难,但是自己写也很麻烦,我整了个全的效果如下:
下面上代码:
<template>中代码如下:
<div class="checkbox-btn-group">
<div class="checkbox">
<label for="seCh0">
<input type="checkbox" id="seCh0" name="selfCheck" value="seCh0" v-model="selfCheck" />
<span :class="showBtn?'enable-checkbox-style':'disable-checkbox-style'">苹果</span>
</label>
</div>
<div class="checkbox">
<label for="seCh1">
<input type="checkbox" id="seCh1" name="selfCheck" value="seCh1" v-model="selfCheck" />
<span :class="showBtn?'enable-checkbox-style':'disable-checkbox-style'">橘子</span>
</label>
</div>
<div class="checkbox">
<label for="seCh2">
<input type="checkbox" id="seCh2" name="selfCheck" value="seCh2" v-model="selfCheck" />
<span :class="showBtn?'enable-checkbox-style':'disable-checkbox-style'">香蕉</span>
</label>
</div>
<div class="checkbox">
<label for="seCh4">
<input type="checkbox" id="seCh4" name="selfCheck" value="seCh4" v-model="selfCheck" />
<span :class="showBtn?'enable-checkbox-style':'disable-checkbox-style'">牛奶</span>
</label>
</div>
</div>
data中一定要设置默认值:
data(){
return{selfCheck:['seCh1'],}
}
css如下:
.checkbox-btn-group {
width: 100%;
.checkbox {
word-wrap: break-word;
word-break: normal;
height: auto;
padding: 10px 0;
text-align: left;
// height: 17px;
line-height: 17px;
font-size: 13px;
color: rgba(51,51,51,1);
display: flex;
align-items: center;
input[type="checkbox"] {
width: 0;
height: 0;
opacity: 0;
}
span::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
// border-radius: 50%;
border: 1px solid rgba(190,190,190,1);
box-sizing: border-box;
margin-right: 6px;
position: relative;
top: 2px;
}
input[type="checkbox"]:checked + .enable-checkbox-style::before {
padding: 2px;
background-color: rgba(68,83,152,1);
background-clip: content-box;
border-color: rgba(68,83,152,1);
}
input[type="checkbox"]:checked + .disable-checkbox-style::before {
padding: 2px;
background-color: rgba(153,153,153,1);
background-clip: content-box;
border-color: rgba(153,153,153,1);
}
.other {
width: 190px;
height: 24px;
border-radius: 2px;
border: 1px solid rgba(68,83,152,1);
font-size: 13px;
margin: 0 0 0 8px;
}
}
}
}
radio就不赘述了,把type换成radio,默认值改成一个string类型就可以了。
很简单,但是有现成可以抄的还是比较爽的,哈哈哈