vue+js實現微信上傳圖片選擇功能

data() {
    return {
      initial:0, //設定選中初始值 作為最終選擇幾個依據
      imgList:[ //初始資料
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
      ]
    };
  },

if(!item.state){ //開始未選中
        //點選選中,改變當前項的選中狀態 設定為true 
        item.state = true
        // 選中初始值 +1
        this.initial++
        // 當前項賦值=設定初始值
        item.serial = this.initial
      }```

else { //選中下點選取消（狀態值為true時點選）
        // 改變當前項選中狀態為false
        item.state = false
        // 設定一個空值 用於接受最終幾個值選中 用於更改選中初始值
        let xuanzhong = 0
        // 跑回圈去自減
        this.imgList.forEach((items,index) => {
          // items = 迴圈所需要的每一項
          if(items.serial>item.serial){ //判斷 當前點選的選中值 和 陣列中所有選中值做對比
            // 陣列中的選中值 大於 當前選中值 陣列中大於的值自減1
            items.serial--
          }
          if(items.state){//判斷陣列選中狀態用於統計
            // 有選中則 設定控制自+1
            xuanzhong ++
          }
        })
        // 給選中初始值 賦值
        this.initial=xuanzhong
        // 當前選中值清空
        item.serial = ''
      }

<template>
    
  <div class="app">
    <div class="bgView">
      <div class="bottomView">

        <div class="ceshitt">
          <div class="imgDiv" v-for="(item,index) in imgList" :key="index">
            <img class="bgImg" src="../../assets/img/BGImg1.png" alt="">
            <div :class="['selectBox',item.state ? 'selectClass' :'']" @click="selectClick(item,index)">
              <p v-if="item.state">{{item.serial}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
      
  </div>
</template>

<script>

export default {
  data() {
    return {
      initial:0, //設定選中初始值 作為最終選擇幾個依據
      imgList:[ //初始資料
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
        {url:'',state:false,serial:'',},
      ]
    };
  },
  components: {},
  created() {
  },
  mounted() {
  },
  methods: {
    selectClick(item,val){
      // item = 點選事件帶過來整條引數
      // val = 所點選的下標
      // 邏輯 1、在原始陣列中物件中增加2個值 --- 選中狀態 預設false  選中值 預設'',
      // 判斷所點選的項的選中狀態
      if(!item.state){ //開始未選中
        //點選選中,改變當前項的選中狀態 設定為true 
        item.state = true
        // 選中初始值 +1
        this.initial++
        // 當前項賦值=設定初始值
        item.serial = this.initial
      }else { //選中下點選取消（狀態值為true時點選）
        // 改變當前項選中狀態為false
        item.state = false
        // 設定一個空值 用於接受最終幾個值選中 用於更改選中初始值
        let xuanzhong = 0
        // 跑回圈去自減
        this.imgList.forEach((items,index) => {
          // items = 迴圈所需要的每一項
          if(items.serial>item.serial){ //判斷 當前點選的選中值 和 陣列中所有選中值做對比
            // 陣列中的選中值 大於 當前選中值 陣列中大於的值自減1
            items.serial--
          }
          if(items.state){//判斷陣列選中狀態用於統計
            // 有選中則 設定控制自+1
            xuanzhong ++
          }
        })
        // 給選中初始值 賦值
        this.initial=xuanzhong
        // 當前選中值清空
        item.serial = ''
      }
    },
  },
};
</script>

<style scoped>

.ceshitt{
  display: flex;
  width: 100%;
  height: 220px;
  flex-wrap: wrap;
/* justify-content: space-between; */
}

.imgDiv{
  width: 30%;
  position: relative;
  margin-right: 10px;
}
.bgImg{
  position: absolute;
  height: 100px;
  width: 100%;
}
.selectBox{
  width: 15px;
  height: 15px;
  line-height: 15px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 100;
  color:#FFF ;
  border: 1px solid cyan;
}
.selectClass{
  background-color:#4cc25b ;
}
</style>