如何用Vue.js实现微信风格的图片选择功能？

本文共计1337个文字，预计阅读时间需要6分钟。

原文：本文字例为大家庭分享了vue+js实现微信上传图片选择的整体代码，供大家参考，具体内容如下+需求：+实现微信发送图片或发送朋友圈选择图片功能+可实现选中后+选择图片标签值自增

改写后：大家庭分享了vue+js编写的微信上传图片选择功能代码，供大家参考。代码实现微信发送图片或朋友圈选图功能，支持选中后点击选择图片，并自动增加图片标签值。

本文实例为大家分享了vue+js实现微信上传图片选择的具体代码，供大家参考，具体内容如下

需求：实现微信发送图片或发朋友圈选择图片功能 可实现选后点击后 选择图片标记值自减或自增

最终效果：

思路：

1、给原始数组中增加一个用于判断是否选中的状态默认为false和选中序号值 默认为空
2、定义一个选中初始值 作为计算选中值

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:'',},       ]     };   },

3、点击选中/取消时 让对应的数据自增或自减

逻辑

1.判断所点击的项的选中状态

开始未选中 — 切换选中状态 – 默认初始值自增1 — 赋值给当前项

if(!item.state){ //开始未选中         //点击选中,改变当前项的选中状态 设置为true          item.state = true         // 选中初始值 +1         this.initial++         // 当前项赋值=设置初始值         item.serial = this.initial       }```

2.选中下点击取消（状态值为true时点击）

更改选中状态 — 设置一个空值 用于接受最终几个值选中 用于更改选中初始值 — 跑循环去自减 — 判断 当前点击的选中值 和 数组中所有选中值做对比 — 数组中的选中值 大于 当前选中值 数组中大于的值自减1 – 判断数组选中状态用于统计-- 有选中则 设置控制自+1 – 给选中初始值 赋值 – 当前选中值清空

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。