<div class="applist" :class="{'checklist' : index==current}" v-for="(item,index) in applist" :key="index">
<img :src="item.app_logo">
<p>{{item.app_name}}</p>
<i class="icon-span" :class="{'icon-span-select' : index==current}" @click="check(item,index)"></i>
</div>
// 选中
check(item,index){
// console.log(index,this.current)
if(index!=this.current){
this.current = index;
}else{
this.current = -1;
}
}
样式:
.applist {
width: 112px;
height: 85px;
background-color: #F9F9F9;
display: inline-block;
margin-right: 20px;
margin-bottom: 20px;
text-align: center;
img {
width: 32px;
border-radius: 50%;
margin-top: 12px;
}
p {
margin-top: 10px;
color: #333;
}
选框样式:
.icon-span{
display: inline-block;
background-color: #fff;
border-radius: 100%;
border: 1px solid #ccc;
position: relative;
width: 13px;
height: 13px;
vertical-align: middle;
}
.icon-span::after{
border: 2px solid transparent;
border-left: 0;
border-top: 0;
content: " ";
left: 3px;
position: absolute;
width: 4px;
height: 8px;
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s;
}
.icon-span-select{
background-color: #fff;
border-color: #E6E6E6;
}
.icon-span-select::after{
border-color: #2C61FF;
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
.checklist {
background-color: #2C61FF;
p {
color: #fff;
}
}