需求为:鼠标移入时，除原有的预览及删除外，增加旋转的功能
预览及删除为原有操作，旋转是通过ref和js控制样式来完成的（质量不太高，如果有需要可以参考下，但是期待大佬们分享下好一点的方法，感谢！！！急！！！）
1.首先利用slot 插入自定义操作按钮，
//html部分<el-form-itemlabel="拍品图片："prop="itemPic"style="width:100%;float:left"><el-upload:action="action"list-type="picture-card":multiple="true":headers="myHeaders":before-upload="onBeforeUploadImage":on-success="handleAvatarSuccess":file-list="fileList":on-change='changeFile':auto-upload='false'><iclass="el-icon-plus"></i>//这是添加<divslot="file"slot-scope="{file}">//重点是这里，会替换原有的操作<img:src="file.url"alt=""class="el-upload-list__item-thumbnail":ref='"file_"+file.uid'><spanclass="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="handlePictureCardPreview(file)"><iclass="el-icon-zoom-in"></i></span><spanclass="el-upload-list__item-delete"@click="handleRemove(file,fileList)"><iclass="el-icon-delete"></i></span><spanclass="el-upload-list__item-rotate"@click="rotateImg(file,fileList)"><iclass="el-icon-refresh"></i></span></span></div></el-upload></el-form-item>2.对应事件
//旋转rotateImg(file,fileList){varind=''fileList.forEach((item,i)=>{if(item.uid==file.uid){ind=i//找到当前操作的图片位置}})this.$refs['file_'+fileList[ind].uid].style.cssText='width:auto;height:auto;max-width:100%;max-height:100%;'varstr=this.$refs['file_'+fileList[ind].uid].className//获取当前图片的class,通过class旋转if(str.indexOf('rotate_left')!=-1){str=str.replace('rotate_left','')this.$refs['file_'+fileList[ind].uid].setAttribute('class',str+'rotate_top')}elseif(str.indexOf('rotate_top')!=-1){str=str.replace('rotate_top','')this.$refs['file_'+fileList[ind].uid].setAttribute('class',str+'rotate_right')}elseif(str.indexOf('rotate_right')!=-1){str=str.replace('rotate_right','')this.$refs['file_'+fileList[ind].uid].setAttribute('class',str+'rotate_bot')}elseif(str.indexOf('rotate_bot')!=-1){str=str.replace('rotate_bot','')this.$refs['file_'+fileList[ind].uid].setAttribute('class',str)}else{this.$refs['file_'+fileList[ind].uid].setAttribute('class',str+'rotate_left')}},//预览handlePictureCardPreview(file){//对应的预览操作},//删除handleRemove(file,fileList){//对应的删除操作}3.样式部分
//顺时针旋转90180370360.rotate_left{transform:rotate(90deg);transition:all2s;}.rotate_top{transform:rotate(180deg);transition:all2s;}.rotate_right{transform:rotate(270deg);transition:all2s;}.rotate_bot{transform:rotate(360deg);transition:all2s;}4.最后效果
好啦，基本实现了。