关于选中图片样式更改和提交操作
template部分
javas部分
//list 定义数组
data（）{
return{
list:[]
}
}
获取后端图片列表
fruitimage() { this.reset(); fruitimage().then(response => { this.list = response.rows }) },
//点击选中的图片集合
checkTab(picItem, idx) { console.log('fsdfs',picItem); if(this.readOnly) return; if (picItem._isChecked === undefined) { this.$set(this.list[idx], "_isChecked", true) } else { picItem._isChecked = !picItem._isChecked; } // 已选择图片 let imgs = []; this.list.forEach(item=>{ if(item._isChecked){ imgs.push({id:item.id,base64:item.base64}) } }) console.log("ischeckedImg:",imgs); this.form.cardsList = imgs;
style样式部分
//选中部分的图片样式更改
ul li { display: inline-block; list-style: none; } li.img-checked { position: relative; &::after { content:""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid #fff; border-radius: 4px; background: rgba($color: #000000, $alpha: 0.3); } }