vue+js實(shí)現(xiàn)微信上傳圖片選擇功能
本文實(shí)例為大家分享了vue+js實(shí)現(xiàn)微信上傳圖片選擇的具體代碼,供大家參考,具體內(nèi)容如下
需求:實(shí)現(xiàn)微信發(fā)送圖片或發(fā)朋友圈選擇圖片功能 可實(shí)現(xiàn)選后點(diǎn)擊后 選擇圖片標(biāo)記值自減或自增
最終效果:
思路:
1、給原始數(shù)組中增加一個(gè)用于判斷是否選中的狀態(tài)默認(rèn)為false和選中序號值 默認(rèn)為空
2、定義一個(gè)選中初始值 作為計(jì)算選中值
data() { ? ? return { ? ? ? initial:0, //設(shè)置選中初始值 作為最終選擇幾個(gè)依據(jù) ? ? ? imgList:[ //初始數(shù)據(jù) ? ? ? ? {url:'',state:false,serial:'',}, ? ? ? ? {url:'',state:false,serial:'',}, ? ? ? ? {url:'',state:false,serial:'',}, ? ? ? ? {url:'',state:false,serial:'',}, ? ? ? ? {url:'',state:false,serial:'',}, ? ? ? ] ? ? }; ? },
3、點(diǎn)擊選中/取消時(shí) 讓對應(yīng)的數(shù)據(jù)自增或自減
邏輯
1.判斷所點(diǎn)擊的項(xiàng)的選中狀態(tài)
開始未選中 — 切換選中狀態(tài) – 默認(rèn)初始值自增1 — 賦值給當(dāng)前項(xiàng)
if(!item.state){ //開始未選中 ? ? ? ? //點(diǎn)擊選中,改變當(dāng)前項(xiàng)的選中狀態(tài) 設(shè)置為true? ? ? ? ? item.state = true ? ? ? ? // 選中初始值 +1 ? ? ? ? this.initial++ ? ? ? ? // 當(dāng)前項(xiàng)賦值=設(shè)置初始值 ? ? ? ? item.serial = this.initial ? ? ? }```
2.選中下點(diǎn)擊取消(狀態(tài)值為true時(shí)點(diǎn)擊)
更改選中狀態(tài) — 設(shè)置一個(gè)空值 用于接受最終幾個(gè)值選中 用于更改選中初始值 — 跑循環(huán)去自減 — 判斷 當(dāng)前點(diǎn)擊的選中值 和 數(shù)組中所有選中值做對比 — 數(shù)組中的選中值 大于 當(dāng)前選中值 數(shù)組中大于的值自減1 – 判斷數(shù)組選中狀態(tài)用于統(tǒng)計(jì)-- 有選中則 設(shè)置控制自+1 – 給選中初始值 賦值 – 當(dāng)前選中值清空
else { //選中下點(diǎn)擊取消(狀態(tài)值為true時(shí)點(diǎn)擊) ? ? ? ? // 改變當(dāng)前項(xiàng)選中狀態(tài)為false ? ? ? ? item.state = false ? ? ? ? // 設(shè)置一個(gè)空值 用于接受最終幾個(gè)值選中 用于更改選中初始值 ? ? ? ? let xuanzhong = 0 ? ? ? ? // 跑循環(huán)去自減 ? ? ? ? this.imgList.forEach((items,index) => { ? ? ? ? ? // items = 循環(huán)所需要的每一項(xiàng) ? ? ? ? ? if(items.serial>item.serial){ //判斷 當(dāng)前點(diǎn)擊的選中值 和 數(shù)組中所有選中值做對比 ? ? ? ? ? ? // 數(shù)組中的選中值 大于 當(dāng)前選中值 數(shù)組中大于的值自減1 ? ? ? ? ? ? items.serial-- ? ? ? ? ? } ? ? ? ? ? if(items.state){//判斷數(shù)組選中狀態(tài)用于統(tǒng)計(jì) ? ? ? ? ? ? // 有選中則 設(shè)置控制自+1 ? ? ? ? ? ? xuanzhong ++ ? ? ? ? ? } ? ? ? ? }) ? ? ? ? // 給選中初始值 賦值 ? ? ? ? this.initial=xuanzhong ? ? ? ? // 當(dāng)前選中值清空 ? ? ? ? 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, //設(shè)置選中初始值 作為最終選擇幾個(gè)依據(jù) ? ? ? imgList:[ //初始數(shù)據(jù) ? ? ? ? {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 = 點(diǎn)擊事件帶過來整條參數(shù) ? ? ? // val = 所點(diǎn)擊的下標(biāo) ? ? ? // 邏輯 1、在原始數(shù)組中對象中增加2個(gè)值 --- 選中狀態(tài) 默認(rèn)false ?選中值 默認(rèn)'', ? ? ? // 判斷所點(diǎn)擊的項(xiàng)的選中狀態(tài) ? ? ? if(!item.state){ //開始未選中 ? ? ? ? //點(diǎn)擊選中,改變當(dāng)前項(xiàng)的選中狀態(tài) 設(shè)置為true? ? ? ? ? item.state = true ? ? ? ? // 選中初始值 +1 ? ? ? ? this.initial++ ? ? ? ? // 當(dāng)前項(xiàng)賦值=設(shè)置初始值 ? ? ? ? item.serial = this.initial ? ? ? }else { //選中下點(diǎn)擊取消(狀態(tài)值為true時(shí)點(diǎn)擊) ? ? ? ? // 改變當(dāng)前項(xiàng)選中狀態(tài)為false ? ? ? ? item.state = false ? ? ? ? // 設(shè)置一個(gè)空值 用于接受最終幾個(gè)值選中 用于更改選中初始值 ? ? ? ? let xuanzhong = 0 ? ? ? ? // 跑循環(huán)去自減 ? ? ? ? this.imgList.forEach((items,index) => { ? ? ? ? ? // items = 循環(huán)所需要的每一項(xiàng) ? ? ? ? ? if(items.serial>item.serial){ //判斷 當(dāng)前點(diǎn)擊的選中值 和 數(shù)組中所有選中值做對比 ? ? ? ? ? ? // 數(shù)組中的選中值 大于 當(dāng)前選中值 數(shù)組中大于的值自減1 ? ? ? ? ? ? items.serial-- ? ? ? ? ? } ? ? ? ? ? if(items.state){//判斷數(shù)組選中狀態(tài)用于統(tǒng)計(jì) ? ? ? ? ? ? // 有選中則 設(shè)置控制自+1 ? ? ? ? ? ? xuanzhong ++ ? ? ? ? ? } ? ? ? ? }) ? ? ? ? // 給選中初始值 賦值 ? ? ? ? this.initial=xuanzhong ? ? ? ? // 當(dāng)前選中值清空 ? ? ? ? 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于VUE選擇上傳圖片并頁面顯示(圖片可刪除)
- JS移動(dòng)端/H5同時(shí)選擇多張圖片上傳并使用canvas壓縮圖片
- PHP實(shí)現(xiàn)微信JS-SDK接口選擇相冊及拍照并上傳的方法
- js實(shí)現(xiàn)上傳文件添加和刪除文件選擇框
- file控件選擇上傳文件確定后觸發(fā)的js事件是哪個(gè)
- 瀏覽器圖片選擇預(yù)覽、旋轉(zhuǎn)、批量上傳的JS代碼實(shí)現(xiàn)
- select下拉選擇框美化實(shí)現(xiàn)代碼(js+css+圖片)
- js實(shí)現(xiàn)下拉框選擇要顯示圖片的方法
- JS實(shí)現(xiàn)的input選擇圖片本地預(yù)覽功能示例
- JS實(shí)現(xiàn)的radio圖片選擇按鈕效果
相關(guān)文章
Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn)
這篇文章主要介紹了Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06解決Element-ui radio單選框label布爾/數(shù)值的一個(gè)坑
這篇文章主要介紹了解決Element-ui radio單選框label布爾/數(shù)值的一個(gè)坑,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue項(xiàng)目如何解決數(shù)字計(jì)算精度問題
這篇文章主要介紹了vue項(xiàng)目如何解決數(shù)字計(jì)算精度問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08