使用情况:因为单选的按钮为圆角,样式有些情况不适用,想要多选的样式,单选的功能。要不就是修改样式,要不就是js。
1、HTML部分
<div class="resource_box">
<div class="box" v-for="(item,index) in pathurlArray" :key="item.arId">
<input type="checkbox" :checked="checkout.resourceUuid == item.arId" @click="checkSel(item,httpUrl[index])" />
<img :src="item.addressUrl" alt="图片错误">
<p>{{item.dataTitleName}}</p>
</div>
</div>
2、接口请求到的数据
3、在data中声明一个对象
checkout: {
dnaCover: "",
isliCode: "",
resourceUuid: '',
},
4、给html绑定点击事件,点击是给checkout赋值
// 多选框改变时
checkSel(item, url) {
this.checkout.dnaCover = item.addressUrl;
this.checkout.isliCode = item.dataIdentifiers;
this.checkout.resourceUuid = item.arId;
},
5、css
.resource_box {
display: flex;
flex-wrap: wrap;
justify-content: start;
.box {
width: 188px;
height: 170px;
background: #f5f7f9;
padding: 18px 8px;
text-align: center;
margin-top: 25px;
position: relative;
margin-left: 30px;
img {
width: 148px;
height: 100px;
object-fit: cover;
}
p {
display: inline-block;
width: 148px;
overflow: hidden;
height: 18px;
}
input[type="checkbox"] {
position: absolute;
top: 18px;
left: 19.5px;
width: 18px;
height: 18px;
border-radius: 0% 0%;
cursor: pointer;
}
}
.box:nth-child(1),
:nth-child(5),
:nth-child(9),
:nth-child(13),
:nth-child(17),
:nth-child(21),
:nth-child(25),
:nth-child(29),
:nth-child(33) {
margin-left: 0px;
}
}
6、checked是多选框的是否选中属性,所以要绑定接口请求到的数据中唯一的不会重复的一个字段。我这里就绑定的是arId。
实现单选功能的主要代码为html中的:checked=“checkout.resourceUuid == item.arId”。checked动态绑定一个条件判断式,条件判断式会根据你点击的选框,给在data中定义的checkout.resourceUuid赋值请求到的唯一arId。这样只有点击时,选中的就为true,其它的都为false。