封装vue2+element上传组件

不做大多数

于 2024-04-19 09:03:11 发布

阅读量581

点赞数 16

分类专栏：个人学习文章标签：前端

本文链接：https://blog.csdn.net/qq_44023710/article/details/137949527

版权

<style scoped lang="scss">
    .img-upload{
     
        position: relative;
        display: inline-block;
        margin-right: 9px;
    }
    .image {
     
        width: 100px;
        height: 100px;
        margin-right: 9px;
    }
    .image:last-child{
     
        margin-right: 0;
    }
    .img-upload .el-upload--picture-card,.img-upload .el-upload-list__item{
     
        height: 100px;
        width: 100px;
        line-height: 100px;
    }
    .img-upload .el-icon-close-tip{
     
        display: none !important;
    }
    .img-upload .el-upload-list__item-status-label{
     
        display: none !important;
    }
    .hide .el-upload--picture-card {
     
        display: none;
    }
    .img-upload-title-required:before {
     
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
    }
    .el-upload__tip{
     
        color: red;
    }
    .hide.el-upload-list .el-upload-list__item.is-focus {
     
        border: 2px solid red; /* 设置选中图片的红色边框样式 */
    }
</style>



<script async defer>
    var uploadMultiImage  = {
     
        template:`
            <div class="img-upload">
                <div v-if="!detail">
                    <el-upload
                      :class="{hide:hideUpload}"
                      :action="action"
                      list-type="picture-card"
                      :limit="limit"
                      :file-list="fileList"
                      :multiple="multiple"
                      :on-success="uploadSuccess"
                      :on-exceed="uploadExceed"
                      :on-change="uploadChange"
                      :on-remove="uploadRemove"
                      :on-preview="handlePictureCardPreview">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                    <div :class="required?'img-upload-title img-upload-title-required':'img-upload-title'">{
      {title}}</div>
                    <div v-if="tip" slot="tip" class="el-upload__tip">{
      {tip}}</div>
                </div>