vue实现类似淘宝商品评价页面星级评价及上传多张图片功能

// 评分 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 = '很满意'  }

<textarea v-bind:maxlength="Surplus" @input="descArea" v-model="inputText" name="abstract" id="abstract" placeholder="宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧！"></textarea>

<input type="file" class="input-file" multiple="multiple" name="avatar" ref="avatarInput" @change="changeImage($event)" accept="image/gif,image/jpeg,image/jpg,image/png">

let reader = new FileReader()   let that = this   reader.readAsDataURL(file)   reader.onload = function (e) {   console.log(this.result)   that.imgUrls.push(this.result)   }

<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>

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>