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

}
}
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()								 
 2/4   首页 上一页 1 2 3 4 下一页 尾页