這篇文章給大家分享的是有關(guān)vue如何實(shí)現(xiàn)類(lèi)似淘寶商品評(píng)價(jià)頁(yè)面星級(jí)評(píng)價(jià)及上傳多張圖片功能的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)從事網(wǎng)站制作、成都做網(wǎng)站的網(wǎng)絡(luò)公司。作為專(zhuān)業(yè)的建站公司,成都創(chuàng)新互聯(lián)公司依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營(yíng)經(jīng)驗(yàn),為您提供專(zhuān)業(yè)的成都網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開(kāi)發(fā)服務(wù)！Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪(fǎng)問(wèn)速度和用戶(hù)體驗(yàn)。

實(shí)現(xiàn)效果圖如下所示：

評(píng)價(jià)頁(yè)

點(diǎn)擊看大圖，且可左右滑動(dòng)

功能需求分析

1.默認(rèn)為5顆星，為非常滿(mǎn)意，4顆滿(mǎn)意，根據(jù)不同星級(jí)顯示不同滿(mǎn)意程度。

 2.評(píng)價(jià)內(nèi)容，最多為200字。

 3.上傳圖片最多上傳6張，圖片不可拉伸，可刪除，可點(diǎn)擊放大左右滑動(dòng)展示

具體實(shí)現(xiàn)關(guān)鍵代碼

 關(guān)于星級(jí)功能：

 寫(xiě)一個(gè)五星數(shù)組，默認(rèn)數(shù)組中有亮的星級(jí)圖片，用bool值判斷是否變暗。 

     默認(rèn)星級(jí)數(shù)組 

 點(diǎn)擊實(shí)現(xiàn)的關(guān)鍵代碼：

// 評(píng)分
 rating: function (index, string) {
  var total = this.stars.length // 星星總數(shù)
  var idx = index + 1 // 這代表選的第idx顆星-也代表應(yīng)該顯示的星星數(shù)量
  // 進(jìn)入if說(shuō)明頁(yè)面為初始狀態(tài)
  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 {
   // 如果再次點(diǎn)擊當(dāng)前選中的星級(jí)-僅取消掉當(dāng)前星級(jí)，保留之前的。
   if (idx == this.scoreStartNum) {
   for (var i = index; i < total; i++) {
    if (i != 0) {
    this.stars[i].src = starOffImg
    this.stars[i].active = false
    }
   }
   }
   // 如果小于當(dāng)前最高星級(jí)，則直接保留當(dāng)前星級(jí)
   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
    }
   }
   }
   // 如果大于當(dāng)前星級(jí)，則直接選到該星級(jí)
   if (idx > this.scoreStartNum) {
   for (var i = 0; i < idx; i++) {
    this.stars[i].src = starOnImg
    this.stars[i].active = true
   }
   }

   var count = 0 // 計(jì)數(shù)器-統(tǒng)計(jì)當(dāng)前有幾顆星
   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 = '滿(mǎn)意'
  } else if (this.scoreStartNum === 5) {
   this.scoreInfo = '很滿(mǎn)意'
  }

2. 評(píng)價(jià)內(nèi)容輸入

<textarea v-bind:maxlength="Surplus" @input="descArea" v-model="inputText" name="abstract" id="abstract" placeholder="寶貝滿(mǎn)足你的期待嗎？說(shuō)說(shuō)你的使用心得，分享給想買(mǎi)的他們吧！"></textarea>

Surplus 表示大限制字?jǐn)?shù)，v-model綁定輸入字體，去掉邊框可以設(shè)置：border: none;

上傳多張圖片功能

單獨(dú)寫(xiě)了個(gè)uploadImages組件,用input來(lái)設(shè)置圖片上傳

<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的錄播圖形式來(lái)做圖片的左右滑動(dòng)功能。

<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"為不自動(dòng)播放，:show-indicators="false"表示不展示下面的圓點(diǎn)，:defaultIndex="num"默認(rèn)展示第幾張圖片，:continuous="false" 是否重復(fù)播放。

關(guān)鍵代碼為：

methods: {
 //拿到圖片信息轉(zhuǎn)化為圖片流
 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)
   }
  }
  // 剩余張數(shù)
  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('數(shù)量' + this.leftImages)
  if (this.leftImages == this.maxImages) {
  this.pictureNums = '上傳圖片'
  } else {
  this.pictureNums = String(this.leftImages) + '/' + String(this.maxImages)
  }
 },
 //輪播圖滑動(dòng)改變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>
  <!--點(diǎn)擊方法圖左右滑動(dòng)-->
  <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>
  <!--默認(rèn)圖片-->
  <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>

完整項(xiàng)目地址為：https://github.com/dt8888/publicComment

注意點(diǎn)：

1.項(xiàng)目中用到了mint -ui，轉(zhuǎn)移項(xiàng)目中錄播圖代碼時(shí)，會(huì)報(bào)錯(cuò)，在終端項(xiàng)目中輸入：npm i mint-ui -S

 用到了px和rem自動(dòng)轉(zhuǎn)化  https://www.jb51.net/article/149721.htm

感謝各位的閱讀！關(guān)于“vue如何實(shí)現(xiàn)類(lèi)似淘寶商品評(píng)價(jià)頁(yè)面星級(jí)評(píng)價(jià)及上傳多張圖片功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

分享標(biāo)題：vue如何實(shí)現(xiàn)類(lèi)似淘寶商品評(píng)價(jià)頁(yè)面星級(jí)評(píng)價(jià)及上傳多張圖片功能-創(chuàng)新互聯(lián)
分享鏈接：http://www.rwnh.cn/article36/igesg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、外貿(mào)建站、靜態(tài)網(wǎng)站、微信公眾號(hào)、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)