目录
初始状态:
<template>
<div>
<van-grid :border="false" :column-num="2">
<van-grid-item v-for="(i,inx) in List" :key="inx">
<div>
<input type="checkbox">
</div>
<van-image :src=List[inx].imageSrc />
</van-grid-item>
</van-grid>
<div>
<input type="checkbox">
<lable>全选</lable>
</div>
</div>
</template>
<script>
export default {
name:"collect01",
data(){
return{
List:[
{imageSrc: "https://img01.yzcdn.cn/vant/apple-1.jpg"},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-2.jpg"},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-3.jpg"},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-4.jpg"},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-5.jpg"}
]
}
},
methods:{
}
}
</script>
<style scoped>
</style>
实现改变复选框样式(改为圆形)
实现代码:
<template>
<div>
<van-grid :border="false" :column-num="2">
<van-grid-item v-for="(i,inx) in List" :key="inx">
<div class="boxs">
<input type="checkbox" class="radius">
</div>
<van-image :src=List[inx].imageSrc />
</van-grid-item>
</van-grid>
<div style="position: relative">
<input type="checkbox" class="radius">
<lable>全选</lable>
</div>
</div>
</template>
<script>
export default {
name: "collect01",
data() {
return {
List: [
{imageSrc: "https://img01.yzcdn.cn/vant/apple-1.jpg"},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-2.jpg"},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-3.jpg"},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-4.jpg"},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-5.jpg"}
]
}
},
methods: {}
}
</script>
<style scoped>
.boxs {
position: absolute;
top: 5px;
left: 10px;
z-index: 10;
}
.radius:checked {
background:#1673ff
}
.radius {
width:20px;
height:20px;
border:solid 1px grey;
-webkit-border-radius:50%;
border-radius:50%;
font-size:0.8rem;
-webkit-appearance:none;
}
/*被选中时添加一个对勾图标*/
.radius:checked::after {
content:'';
top:5px;
left:5px;
position:absolute;
border:#fff solid 2px;
border-top:none;
border-right:none;
height:6px;
width:10px;
/*逆时针旋转45°*/
transform:rotate(-45deg);
}
</style>
点击复选框实现多选、全选
methods: {
selectAll() {
if (this.allSelected) {
this.selectedItems = this.List.map((item) => item.id);
} else {
this.selectedItems = [];
}
},
selectItem() {
if (this.selectedItems.length === this.List.length) {
this.allSelected = true;
} else {
this.allSelected = false;
}
console.log(this.selectedItems)
}
}
实现代码:
<template>
<div>
<van-grid :border="false" :column-num="2">
<van-grid-item v-for="(i,inx) in List" :key="inx">
<div class="boxs">
<input type="checkbox" class="radius" :value="i.id" v-model="selectedItems" @change="selectItem">
</div>
<van-image :src=i.imageSrc />
</van-grid-item>
</van-grid>
<div style="position: relative">
<input type="checkbox" class="radius" @change="selectAll" v-model="allSelected">
<lable>全选</lable>
</div>
</div>
</template>
<script>
export default {
name: "collect01",
data() {
return {
List: [
{imageSrc: "https://img01.yzcdn.cn/vant/apple-1.jpg",id:1},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-2.jpg",id:2},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-3.jpg",id:3},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-4.jpg",id:4},
{imageSrc: "https://img01.yzcdn.cn/vant/apple-5.jpg",id:5}
],
selectedItems: [],
allSelected: false,
}
},
methods: {
selectAll() {
if (this.allSelected) {
this.selectedItems = this.List.map((item) => item.id);
} else {
this.selectedItems = [];
}
},
selectItem() {
if (this.selectedItems.length === this.List.length) {
this.allSelected = true;
} else {
this.allSelected = false;
}
console.log(this.selectedItems)
}
}
}
</script>
<style scoped>
.boxs {
position: absolute;
top: 5px;
left: 10px;
z-index: 10;
}
.radius:checked {
background:#1673ff
}
.radius {
width:20px;
height:20px;
border:solid 1px grey;
-webkit-border-radius:50%;
border-radius:50%;
font-size:0.8rem;
-webkit-appearance:none;
}
/*被选中时添加一个对勾图标*/
.radius:checked::after {
content:'';
top:5px;
left:5px;
position:absolute;
border:#fff solid 2px;
border-top:none;
border-right:none;
height:6px;
width:10px;
/*逆时针旋转45°*/
transform:rotate(-45deg);
}
</style>