vue 图片多选排序

前言：有这样一个需求，将图片勾选排序，就类似，发微信朋友圈，手机照片选取。
如图：

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 {
       50%;
      height: 17vw;
      border: 1px solid red;
      overflow-y: auto;
      padding: 0 .5vw .5vw .5vw;

      .select_li {
        position: relative;
        float: left;
         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;
           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