<template> <div> <!--展示图片--> <div v-if="imgUrls.length>0" v-for="(item,index) in imgUrls"> <img ref="picture" :src="item?item:require('')" @click="bigImg(index)"> <img src="" @click="delect(index)"> </div> <!--点击方法图左右滑动--> <div v-if="showBigImg" @click.stop="showBigImg=!showBigImg"> <div> <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 >{{index+1+'https://www.jb51.net/'+imgUrls.length}}</div> <img :src="imgUrls[index]"/> </mt-swipe-item> </mt-swipe> </div> </div> <!--默认图片--> <div v-if="imgUrls.length<6"> <img src=""> <span>{{pictureNums}}</span> <input type="file" multiple="multiple" 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自动转化 https://www.jb51.net/article/149721.htm
总结
以上所述是小编给大家介绍的vue实现类似淘宝商品评价页面星级评价及上传多张图片功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: