vue+js實(shí)現(xiàn)微信上傳圖片選擇功能

更新時(shí)間：2022年07月12日 17:23:06 作者：x_xuNou

這篇文章主要為大家詳細(xì)介紹了vue+js實(shí)現(xiàn)微信上傳圖片選擇功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: