el-upload 自定义缩略图模版的预览、下载、删除

el-upload 自定义缩略图模版的预览、下载、删除

<el-upload
  action="#"
  ref="upload"
  list-type="picture-card"
  :auto-upload="false">
   <i slot="default" class="el-icon-plus"></i>
   <div slot="file" slot-scope="{file}">
     <img class="el-upload-list__item-thumbnail" :src="file.url">
     <span class="el-upload-list__item-actions">
       <span @click="handlePictureCardPreview(file)" class="el-upload-list__item-preview">
         <i class="el-icon-zoom-in"></i>
       </span>
       <span v-if="!disabled" @click="handleDownload(file)" class="el-upload-list__item-delete">
         <i class="el-icon-download"></i>
       </span>
       <span v-if="!disabled" @click="handleRemove(file)" class="el-upload-list__item-delete">
         <i class="el-icon-delete"></i>
       </span>
     </span>
   </div>
 </el-upload>

// 图片删除
handleRemove(file) {
  this.$refs.upload.handleRemove(file)
  // this.$refs.upload.clearFiles()  //删除全部
},
// 图片预览
handlePictureCardPreview(file) {
  this.dialogImageUrl = file.url;
  this.dialogVisible = true;
},
// 图片下载
handleDownload(file) {
  var a = document.createElement('a')
  var event = new MouseEvent('click')
  a.download = file.name
  a.href = file.url	
  a.dispatchEvent(event)
}