关于选中图片样式更改和提交操作

template部分

 <ul>

         <li :class="item._isChecked?'img-checked':''" v-for="(item,index) in list" :key="index" @click="checkTab(item,index)">

                  <img :src="item.base64">

         </li>

  </ul>


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);

  }

}