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>

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

查看更多关于vue+js实现微信上传图片选择功能的详细内容...