您现在的位置是:网站首页> 编程资料编程资料
vue+js实现微信上传图片选择功能_vue.js_
2023-05-24
198人已围观
简介 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 = '' }完整代码
![]()
{{item.serial}}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- 深入浅出聊一聊js中的'this'关键字_javascript技巧_
- vue实现简单的购物车小案例_vue.js_
- Ant Design Vue 走马灯实现单页多张图片轮播效果_vue.js_
- Vue实现记住账号密码功能的操作过程_vue.js_
- vue contextmenujs鼠标右键菜单高度不够显示不全的问题及解决方法_vue.js_
- vue长按事件touch示例详解_vue.js_
- JavaScript实现Tab点击切换_javascript技巧_
- js实现点击切换和自动播放的轮播图_javascript技巧_
- ASP.NET实现Repeater控件的数据绑定_基础知识_
- javascript实现图片轮播简单效果_javascript技巧_
