最近在寫一個關于vue的商城項目，然后集成在移動端中，開發需求中有一界面，類似淘寶商城評價界面！實現效果圖如下所示：
評價頁
點擊看大圖，且可左右滑動
功能需求分析
1.默認為5顆星，為非常滿意，4顆滿意，根據不同星級顯示不同滿意程度。
2.評價內容，最多為200字。
3.上傳圖片最多上傳6張，圖片不可拉伸，可刪除，可點擊放大左右滑動展示
具體實現關鍵代碼
關于星級功能：
寫一個五星數組，默認數組中有亮的星級圖片，用bool值判斷是否變暗。
默認星級數組
點擊實現的關鍵代碼：
// 評分 rating: function (index, string) { var total = this.stars.length // 星星總數 var idx = index + 1 // 這代表選的第idx顆星-也代表應該顯示的星星數量 // 進入if說明頁面為初始狀態 if (this.scoreStartNum === 0) { this.scoreStartNum = idx for (var i = 0; i < idx; i++) { this.stars[i].src = starOnImg this.stars[i].active = true } } else { // 如果再次點擊當前選中的星級-僅取消掉當前星級，保留之前的。 if (idx == this.scoreStartNum) { for (var i = index; i < total; i++) { if (i != 0) { this.stars[i].src = starOffImg this.stars[i].active = false } } } // 如果小于當前最高星級，則直接保留當前星級 if (idx < this.scoreStartNum) { for (var i = idx; i < this.scoreStartNum; i++) { if (i != 0) { this.stars[i].src = starOffImg this.stars[i].active = false } } } // 如果大于當前星級，則直接選到該星級 if (idx > this.scoreStartNum) { for (var i = 0; i < idx; i++) { this.stars[i].src = starOnImg this.stars[i].active = true } } var count = 0 // 計數器-統計當前有幾顆星 for (var i = 0; i < total; i++) { if (this.stars[i].active) { count++ } } this.scoreStartNum = count } if (this.scoreStartNum === 1) { this.scoreInfo = '很差' } else if (this.scoreStartNum === 2) { this.scoreInfo = '差' } else if (this.scoreStartNum === 3) { this.scoreInfo = '一般' } else if (this.scoreStartNum === 4) { this.scoreInfo = '滿意' } else if (this.scoreStartNum === 5) { this.scoreInfo = '很滿意' }2. 評價內容輸入
<textarea v-bind:maxlength="Surplus" @input="descArea" v-model="inputText" name="abstract" id="abstract" placeholder="寶貝滿足你的期待嗎？說說你的使用心得，分享給想買的他們吧！"></textarea>
Surplus 表示最大限制字數，v-model綁定輸入字體，去掉邊框可以設置：border: none;
上傳多張圖片功能
單獨寫了個uploadImages組件,用input來設置圖片上傳
<input type="file" class="input-file" multiple="multiple" name="avatar" ref="avatarInput" @change="changeImage($event)" accept="image/gif,image/jpeg,image/jpg,image/png">
在@change="handleChange"拿到圖片信息，有兩種方式展示：
圖片流形式展示圖片
let reader = new FileReader() let that = this reader.readAsDataURL(file) reader.onload = function (e) { console.log(this.result) that.imgUrls.push(this.result) }2.上傳阿里云等第三方，直接拿到圖片url路徑，在此我用的第一種方式。
用mint-ui的錄播圖形式來做圖片的左右滑動功能。
<mt-swipe :auto="0" :show-indicators="false" @change="handleChange" :continuous="false" :defaultIndex="num"> <mt-swipe-item v-for="(item,index) in imgUrls" :key="item.id"> <div class="num" >{{index+1+'/'+imgUrls.length}}</div> <img :src="imgUrls[index]" class="img"/> </mt-swipe-item> </mt-swipe>:auto="0"為不自動播放，:show-indicators="false"表示不展示下面的圓點，:defaultIndex="num"默認展示第幾張圖片，:continuous="false" 是否重復播放。
關鍵代碼為：
methods: { //拿到圖片信息轉化為圖片流 changeImage: function (e) { if (e.target.files.length <= (this.maxImages - this.imgUrls.length)) { for (var i = 0; i < e.target.files.length; i++) { let file = e.target.files[i] this.file = file console.log(this.file) let reader = new FileReader() let that = this reader.readAsDataURL(file) reader.onload = function (e) { console.log(this.result) that.imgUrls.push(this.result) } } // 剩余張數 this.leftImages = this.maxImages - (this.imgUrls.length + e.target.files.length) this.pictureNums = String(this.maxImages - (this.imgUrls.length + e.target.files.length)) + '/' + String(this.maxImages) } else { Toast('只能選擇' + (this.maxImages - this.imgUrls.length) + '張了') } }, //刪除 delect (index) { this.imgUrls.splice(index, 1) this.leftImages++ console.log('數量' + this.leftImages) if (this.leftImages == this.maxImages) { this.pictureNums = '上傳圖片' } else { this.pictureNums = String(this.leftImages) + '/' + String(this.maxImages) } }, //輪播圖滑動改變index handleChange(index){ this.num = index }, //看大圖 bigImg (index) { this.showBigImg = true this.num = index } }樣式如下
<template> <div class="avatar"> <!--展示圖片--> <div class="hasPic" v-if="imgUrls.length>0" v-for="(item,index) in imgUrls"> <img class="seledPic" ref="picture" :src="item?item:require('../../static/images/imagebj.jpg')" name="avatar" @click="bigImg(index)"> <img class="delect" src="../../static/images/del.png" @click="delect(index)"> </div> <!--點擊方法圖左右滑動--> <div class="imgMask" v-if="showBigImg" @click.stop="showBigImg=!showBigImg"> <div class="showImg"> <mt-swipe :auto="0" :show-indicators="false" @change="handleChange" :continuous="false" :defaultIndex="num"> <mt-swipe-item v-for="(item,index) in imgUrls" :key="item.id"> <div class="num" >{{index+1+'/'+imgUrls.length}}</div> <img :src="imgUrls[index]" class="img"/> </mt-swipe-item> </mt-swipe> </div> </div> <!--默認圖片--> <div class="selPic" v-if="imgUrls.length<6"> <img src="../../static/images/imagebj.jpg" name="avatar"> <span>{{pictureNums}}</span> <input type="file" class="input-file" multiple="multiple" name="avatar" ref="avatarInput" @change="changeImage($event)" accept="image/gif,image/jpeg,image/jpg,image/png"> </div> </div> </template>完整項目地址為：https://github.com/dt8888/publicComment
注意點：
1.項目中用到了mint -ui，轉移項目中錄播圖代碼時，會報錯，在終端項目中輸入：npm i mint-ui -S
用到了px和rem自動轉化 http://www.49028c.com/article/149721.htm
總結
以上所述是小編給大家介紹的vue實現類似淘寶商品評價頁面星級評價及上傳多張圖片功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
