最近写了一个关于vue的商场项目，然后集成到移动终端中。开发需求中有一个界面，类似淘宝商城测评界面！实现效果图如下：

评估页面

点按以查看更大的图像并左右滑动

功能需求分析

1.默认值是5星，非常满意，4星满意。根据不同的星级显示不同的满意度。

2.评价内容，最多200字。

3.最多上传6张图片，不能拉伸但可以删除。单击放大并左右滑动以显示

关键代码的具体实现

关于星级评定功能：

写一个五星数组。默认情况下，数组中有亮星图像，使用bool值来判断是否变暗。

默认星形阵列

单击实现的关键代码：

//score rating:函数(index，String) {var total=this。stars.length//the星总数var idx=index 1 //这代表所选的idx星-它也代表应该显示的星数//进入if描述页面作为初始状态if (this。scorestartnum==0) {this。score startnum=idx for(var I=0；i idx我){这个。星星[我]。src=staronimgthis。星星[我]。active=true } } else {//如果您再次单击当前选定的星级-只需取消当前星级并保留上一个。if(idx==this . score startnum){ for(var I=index；I总计；我){如果(我！=0) {this。星星[我]。src=staroffimg this。星星[我]。active=false } } }//如果低于当前最高星级，则保留当前星级if (idxthis。score startnum){ for(var I=idx；i this.scoreStartNum我){如果(我！=0) {this。星星[我]。src=staroffimg this。星星[我]。active=false } } }//如果大于当前星级，则直接选择为if (idxthis。score startnum){ for(var I=0；i idx我){这个。星星[我]。src=staronimgthis。星星[我]。active=true } } var count=0//count-计算当前有多少颗星(var I=0；I总计；我){如果(这个。星星[我]。active) {count}}此。scorestartnum=count} if (this。scorestartnum===1) {this。scoreinfo='非常糟糕' } Elseif(这。scorestartnum==2) {this。scoreinfo=' poor'} else if (this。scorestartnum===3) {this。scoreinfo=' average'} Elseif(这。scorestartnum==4) {this。scoreinfo='满意' } else if (this。scorestartnum===5) {this。scoreinfo='非常满意' }2。评估内容输入

Textarea v-bind: maxlength='盈余' @ input=' descarea ' v-model=' input text ' name=' abstract ' id=' abstract ' placeholder='宝贝，你达到预期了吗？说说你的经历，给想买的人分享！”/textarearurplus表示最大字数限制，v-model绑定输入字体，可以通过去掉边框来设置：border: none

上传多张图片功能

单独编写一个上传图像组件，并使用输入设置图像上传

input type=' file ' class=' input-file ' multiple=' multiple ' name=' avatarInput ' ref=' avatarInput ' @ change=' change Image($ event)' accept=' Image/gif，image/jpeg，Image/jpg，image/png '获取图片信息在@change='handleChange '处，有两种显示方式：

以图片流的形式显示图片

Let reader=newfilereader () let那=thisreader.readasdataurl(文件)reader . onload=function(e){ console . log(this。result) that.imgurls.push (this。结果)} 2。上传阿里巴巴云等第三方，直接获取图片的url路径。这里我用的第一种方式。

图片的左右滑动功能是在mint-ui的录播图片形式下完成的。

Mt-sweep : auto=' 0 ' : show-indicators=' false ' @ change=' handleChange ' : continuous=' false ' : defaultindex=' num ' Mt-sweep-item v-for='(item，index)in imgUrls ' : key=' item . id ' div class=' num ' { index 1 '/' imgUrls . length } }/div img : src=' http 33: imgUrls[index

关键代码为：

methods: { //拿到图片信息转化为图片流changeImage:函数{ if(e . target。文件。长度=(这个。格言-这个。imgurls。length)){ for(var I=0；即目标。文件。长度；I){让文件=e . target。文件[我]这个。文件=文件控制台。日志(这个。file)let reader=新文件读取器()let那=这个读取器。readasdataurl(文件)读取器。onload=function(e){ console。日志(这个。结果)那。imgurls。推(这个。结果)}//剩余张数这个。左法师=这个。格言-(这个。imgurls。目标长度e。文件。长度)这个。picturenums=String(这。格言-(这个。imgurls。目标长度e。文件。长度))“/”字符串(这。maximegs)} else { Toast('只能选择(这个。格言-这个。imgurls。长度)张了') } }, //删除delect(index){ this。imgurls。拼接(索引，1) this.leftImages console.log('数量这个。左图像)如果(这个。左图像==这个。(格言){这个。picturenums='上传图片} else { this。picturenums=String(这。左图像)'/'字符串(这个。maximages)} }，//轮播图滑动改变index handleChange(index){ this。num=index }，//看大图bigImg(索引){这个。showbig img=这是真的。num=index } }样式如下

模板div class='avatar '！-展示图片-div class=' HasPic ' v-if=' IMgurls。长度0 ' v-for='(项目，索引)在IMgurls ' img class=' seledPic ' ref=' picture ' : src=' http : item？item:require('././static/images/imagebj。jpg ')' name=' avatar ' @ click=' bigImg(index)' img class=' delect ' src=' http :/./静态/图像/del。png ' @ click=' delect(index)'/div！-点击方法图左右滑动-div class=' IMGmask ' v-if=' ShowBigIMg ' @单击。stop=' ShowBigIMg=！showBigImg ' div class=' showImg ' mt-swipe : auto=' 0 ' : how-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 3: src-默认图片-div class=' SelPic ' v-if=' IMGurls。长度6 ' IMg src=' http :/./static/images/imagebj。jpg ' name=' avatar ' span { { pictureNums } }/span input type=' file ' class=' input-file ' multiple=' multiple ' name=' avatar ' ref=' avatar input ' @ change image($ event)' accept=' image/gif，image/jpeg，image/jpg，image/png' /div /div /template完整项目地址为：https://github。com/dt 8888/公众意见

注意点：

1.项目中用到了薄荷味的，转移项目中录播图代码时，会报错，在终端项目中输入：npm i mint-ui -S

用到了像素和雷姆自动转化https://www.jb51.net/article/149721.htm

总结

以上所述是小编给大家介绍的某视频剪辑软件实现类似淘宝商品评价页面星级评价及上传多张图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！