vue + el-upload 自定义操作按钮及事件

需求为:鼠标移入时，除原有的预览及删除外，增加旋转的功能

预览及删除为原有操作，旋转是通过ref和js控制样式来完成的（质量不太高，如果有需要可以参考下，但是期待大佬们分享下好一点的方法，感谢！！！急！！！）

1.首先利用slot 插入自定义操作按钮，

//html 部分
<el-form-item label="拍品图片：" 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'>
        <i class="el-icon-plus"></i> //这是添加
        <div slot="file" slot-scope="{file}">   //重点是这里，会替换原有的操作
            <img :src="file.url" alt="" class="el-upload-list__item-thumbnail" :ref='"file_"+file.uid'>
            <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"><i class="el-icon-zoom-in"></i></span>
                <span class="el-upload-list__item-delete" @click="handleRemove(file,fileList)"><i class="el-icon-delete"></i></span>
                <span class="el-upload-list__item-rotate" @click="rotateImg(file,fileList)"><i class="el-icon-refresh"></i></span>
            </span>
        </div>
    </el-upload>
</el-form-item>

2.对应事件

//旋转
rotateImg(file, fileList) {
    var ind = ''
    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%;'
    var str = 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')
    } else if (str.indexOf('rotate_top') != -1) {
        str = str.replace('rotate_top', '')
        this.$refs['file_' + fileList[ind].uid].setAttribute('class', str + ' rotate_right')
    } else if (str.indexOf('rotate_right') != -1) {
        str = str.replace('rotate_right', '')
        this.$refs['file_' + fileList[ind].uid].setAttribute('class', str + ' rotate_bot')
    } else if (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.样式部分

//顺时针旋转 90 180 370 360
.rotate_left {
    transform: rotate(90deg);
    transition: all 2s;
}

.rotate_top {
    transform: rotate(180deg);
    transition: all 2s;
}
.rotate_right {
    transform: rotate(270deg);
    transition: all 2s;
}
.rotate_bot {
    transform: rotate(360deg);
    transition: all 2s;
}

4.最后效果

好啦，基本实现了。