组件功能
提供上传、显示列表、允许拖拽排序、批量预览、下载、删除等功能
组件预览
组件实现
<template> <div> <el-upload :action= "uploadUrl" :accept= "accept" :limit= "limit" :on-exceed= "handleExceed" :before-upload= "beforeUpload" :headers= "headers" :show-file-list= "false" :file-list= "fileList" :on-success= "handleSuccess" class= "upload-demo" :multiple= "multiple" > <slot name= "uploadComponent" > <el-button size= "small" v- if = "isShowDel" type= "text" >{
{
uploadTxt }}</el-button> </slot> </el-upload> <slot name= "filePreviewComponent" ></slot> <draggable class= "upload-list" v-model= "fileArr" filter= ".forbid" animation= "300" @end= "onMoveEnd" > <!-- <div> --> <transition-group> <div v- for = "(item, index) in fileArr" :key= "index" class= "upload-list-item" > <div :title= "item.realName" class= "upload-list-item-title" > <img style= "margin-right:5px" :src= "showTypeTip(item)" width= "15px" height= "18px" alt= "" /> <span>{
{ item.realName }}</span> </div> <div class= "upload_options" > <span class= "preview-class" @click= "preview(item)" > <i class= "el-icon-view" ></i> 预览</span > <span class= "down-class" @click= "downloadFile(item)" > <i class= "el-icon-download" ></i> 下载</span > <span v- if = "isShowDel" class= "del-class" &
|