最近在做后台的一个项目,需要实现列表单选或者多选!

实现的效果是这样子的!

Vue实现图片列表单选或者多选、全选的方法_d3

 废话不多说,直接码代码

template结构

<template>
<div class="imgList">
<div class="img-item" v-for="(item, index) in allimgData" :class="{active:item.bOn}" :key="index" @click="checkImg(index)">
<img :src="item.imgsrc" alt="">
</div>
</div>
</template>

script结构

<script>
export default {
name:"FileManagement",
data(){
return{
arr:[],
allimgData:[
{
id:'001',
imgsrc:"http://browser9.qhimg.com/bdm/480_296_0/t01bbd94b90e850d1d3.jpg"
},
{
id:'002',
imgsrc:"http://browser9.qhimg.com/bdm/480_296_0/t01bbd94b90e850d1d3.jpg"
},
{
id:'003',
imgsrc:"http://browser9.qhimg.com/bdm/480_296_0/t01bbd94b90e850d1d3.jpg"
},
{
id:'004',
imgsrc:"http://browser9.qhimg.com/bdm/480_296_0/t01bbd94b90e850d1d3.jpg"
}
]
}
},
mounted () {
this.allimgData.map(function (value) {
value.bOn = false
})
},
methods:{
checkImg(index){
const temp = this.allimgData[index]
temp.bOn = !this.allimgData[index].bOn
this.$set(this.allimgData, index, temp)
}
}
}
</script>

style样式结构

<style lang="less" scoped>
.imgList{
width: 98%;
margin: 20px 0;
background-color: #FFF;
display: flex;
flex-wrap: wrap;
.active{
display: block;
width: 196px;
height: 196px;
line-height: 0;
font-size: 0;
vertical-align: middle;
border: 3px solid #2b89fd;
-webkit-transform: rotate(0deg);

}
.active::before{
content: "";
position: absolute;
right: 0;
bottom: 0;
border: 12px solid #2b89fd;
border-top-color: transparent;
border-left-color: transparent;
}
.active::after{
content: "";
display: block;
width: 5px;
height: 10px;
position: absolute;
right: 4px;
bottom: 5px;
border: 1px solid #fff;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
cursor: pointer;
}
.img-item{
width: 196px;
height: 196px;
overflow: hidden;
background-color: #FFFFFF;
margin: 20px;
cursor: pointer;
img{
height: 196px;
}

}
}
style>

如果对你有所帮助的话,

欢迎关注我们的微信公众号【Aliwen小栈】进行一起学习!