vue 圖片多選排序
阿新 • • 發佈:2020-08-13
前言:有這樣一個需求,將圖片勾選排序,就類似,發微信朋友圈,手機照片選取。
如圖:
ok,廢話不多說,上程式碼
html
.select_demo .select_li(v-for="(item,index) in selectArr" @click="selectFn(index)") .select_box(v-if="item.value") {{item.value}} .select_box_active(v-else) | {{item.name}}
css
.select_demo { width: 50%; height: 17vw; border: 1px solid red; overflow-y: auto; padding: 0 .5vw .5vw .5vw; .select_li { position: relative; float: left; width: 24%; height: 5vw; margin-left: calc(4%/3); background: chartreuse; margin-top: .5vw; cursor: pointer; &:nth-child(4n+1) { margin-left: 0%; } .select_box,.select_box_active { position: absolute; width: 10px; height: 10px; right: -5px; top: -5px; border-radius: 90px; font-size: 10px; border: 1px solid white; } .select_box { background: rgba(15, 235, 255, 1); } } }
data()
data () { return { selectPic: [ ], selectArr: [ {id: 1,name: 'demo1111'}, {id: 2,name: 'demo222'}, {id: 3,name: 'demo333'}, {id: 4,name: 'demo44'}, {id: 5,name: 'demo555'}, {id: 6,name: 'demo666'}, {id: 7,name: 'demo777'}, {id: 8,name: 'demo888'}, {id: 9,name: 'demo9999'}, {id: 10,name: 'demo1010'} ], } }
methods
selectFn(index) {
if(this.selectArr[index].value == undefined) {
this.selectPic.push(this.selectArr[index])
this.$set(this.selectArr[index],"value",this.selectPic.length)
}else {
var i;
this.selectPic.map((item,indexs) => {
if(item == this.selectArr[index]) {
i = indexs
}
})
this.selectArr.map((item) => {
if((i+1) < item.value) {
item.value = item.value - 1
}
})
this.$set(this.selectArr[index],"value",undefined)
this.selectPic.splice(i,1)
}
// console.log(this.selectArr)
// console.log(this.selectPic)
}
ok,大功告成,nice