vue+js實現(xiàn)微信上傳圖片選擇功能
本文實例為大家分享了vue+js實現(xiàn)微信上傳圖片選擇的具體代碼,供大家參考,具體內(nèi)容如下
需求:實現(xiàn)微信發(fā)送圖片或發(fā)朋友圈選擇圖片功能 可實現(xiàn)選后點擊后 選擇圖片標記值自減或自增
最終效果:
思路:
1、給原始數(shù)組中增加一個用于判斷是否選中的狀態(tài)默認為false和選中序號值 默認為空
2、定義一個選中初始值 作為計算選中值
data() { ? ? return { ? ? ? initial:0, //設(shè)置選中初始值 作為最終選擇幾個依據(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、點擊選中/取消時 讓對應(yīng)的數(shù)據(jù)自增或自減
邏輯
1.判斷所點擊的項的選中狀態(tài)
開始未選中 — 切換選中狀態(tài) – 默認初始值自增1 — 賦值給當前項
if(!item.state){ //開始未選中 ? ? ? ? //點擊選中,改變當前項的選中狀態(tài) 設(shè)置為true? ? ? ? ? item.state = true ? ? ? ? // 選中初始值 +1 ? ? ? ? this.initial++ ? ? ? ? // 當前項賦值=設(shè)置初始值 ? ? ? ? item.serial = this.initial ? ? ? }```
2.選中下點擊取消(狀態(tài)值為true時點擊)
更改選中狀態(tài) — 設(shè)置一個空值 用于接受最終幾個值選中 用于更改選中初始值 — 跑循環(huán)去自減 — 判斷 當前點擊的選中值 和 數(shù)組中所有選中值做對比 — 數(shù)組中的選中值 大于 當前選中值 數(shù)組中大于的值自減1 – 判斷數(shù)組選中狀態(tài)用于統(tǒng)計-- 有選中則 設(shè)置控制自+1 – 給選中初始值 賦值 – 當前選中值清空
else { //選中下點擊取消(狀態(tài)值為true時點擊) ? ? ? ? // 改變當前項選中狀態(tài)為false ? ? ? ? item.state = false ? ? ? ? // 設(shè)置一個空值 用于接受最終幾個值選中 用于更改選中初始值 ? ? ? ? let xuanzhong = 0 ? ? ? ? // 跑循環(huán)去自減 ? ? ? ? this.imgList.forEach((items,index) => { ? ? ? ? ? // items = 循環(huán)所需要的每一項 ? ? ? ? ? if(items.serial>item.serial){ //判斷 當前點擊的選中值 和 數(shù)組中所有選中值做對比 ? ? ? ? ? ? // 數(shù)組中的選中值 大于 當前選中值 數(shù)組中大于的值自減1 ? ? ? ? ? ? items.serial-- ? ? ? ? ? } ? ? ? ? ? if(items.state){//判斷數(shù)組選中狀態(tài)用于統(tǒng)計 ? ? ? ? ? ? // 有選中則 設(shè)置控制自+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, //設(shè)置選中初始值 作為最終選擇幾個依據(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 = 點擊事件帶過來整條參數(shù) ? ? ? // val = 所點擊的下標 ? ? ? // 邏輯 1、在原始數(shù)組中對象中增加2個值 --- 選中狀態(tài) 默認false ?選中值 默認'', ? ? ? // 判斷所點擊的項的選中狀態(tài) ? ? ? if(!item.state){ //開始未選中 ? ? ? ? //點擊選中,改變當前項的選中狀態(tài) 設(shè)置為true? ? ? ? ? item.state = true ? ? ? ? // 選中初始值 +1 ? ? ? ? this.initial++ ? ? ? ? // 當前項賦值=設(shè)置初始值 ? ? ? ? item.serial = this.initial ? ? ? }else { //選中下點擊取消(狀態(tài)值為true時點擊) ? ? ? ? // 改變當前項選中狀態(tài)為false ? ? ? ? item.state = false ? ? ? ? // 設(shè)置一個空值 用于接受最終幾個值選中 用于更改選中初始值 ? ? ? ? let xuanzhong = 0 ? ? ? ? // 跑循環(huán)去自減 ? ? ? ? this.imgList.forEach((items,index) => { ? ? ? ? ? // items = 循環(huán)所需要的每一項 ? ? ? ? ? if(items.serial>item.serial){ //判斷 當前點擊的選中值 和 數(shù)組中所有選中值做對比 ? ? ? ? ? ? // 數(shù)組中的選中值 大于 當前選中值 數(shù)組中大于的值自減1 ? ? ? ? ? ? items.serial-- ? ? ? ? ? } ? ? ? ? ? if(items.state){//判斷數(shù)組選中狀態(tài)用于統(tǒng)計 ? ? ? ? ? ? // 有選中則 設(shè)置控制自+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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 如何使用props、emit實現(xiàn)自定義雙向綁定的實現(xiàn)
這篇文章主要介紹了Vue 如何使用props、emit實現(xiàn)自定義雙向綁定的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06解決Element-ui radio單選框label布爾/數(shù)值的一個坑
這篇文章主要介紹了解決Element-ui radio單選框label布爾/數(shù)值的一個坑,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04