vue+js实现微信上传图片选择功能
作者：x_xuNou
这篇文章主要为大家详细介绍了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。