update

gaoshp

2024-05-14 472f9edec5c966feaee13aabe91aef6be7307ea2

update

 src/components/scUpload/index.vue

@@ -7,7 +7,8 @@
            <el-image class="image" :src="file.tempFile" fit="cover"></el-image>
        </div>
        <div v-if="file && file.status=='success'" class="sc-upload__img">
            <el-image class="image" :src="file.url" :preview-src-list="[file.url]" fit="cover" hide-on-click-modal append-to-body :z-index="9999">
            <el-image class="image" :src="file.url" :preview-src-list="[file.url]" fit="cover" hide-on-click-modal
                append-to-body :z-index="9999">
                <template #placeholder>
                    <div class="sc-upload__img-slot">
                        Loading...
@@ -18,33 +19,26 @@
                <span class="del" @click="handleRemove()"><el-icon><el-icon-delete /></el-icon></span>
            </div>
        </div>
        <el-upload v-if="!file" class="uploader" ref="uploader"
            :auto-upload="cropper?false:autoUpload"
            :disabled="disabled"
            :show-file-list="showFileList"
            :action="action"
            :name="name"
            :data="data"
            :accept="accept"
            :limit="1"
            :http-request="request"
            :on-change="change"
            :before-upload="before"
            :on-success="success"
            :on-error="error"
            :on-exceed="handleExceed">
        <el-upload v-if="!file" class="uploader" ref="uploader" :auto-upload="cropper ? false : autoUpload"
            :disabled="disabled" :show-file-list="showFileList" :action="action" :name="name" :data="data"
            :accept="accept" :limit="1" :http-request="request" :on-change="change" :before-upload="before"
            :on-success="success" :on-error="error" :on-exceed="handleExceed">
            <slot>
                <div class="el-upload--picture-card">
                    <div class="file-empty">
                        <el-icon><component :is="icon" /></el-icon>
                        <el-icon>
                            <component :is="icon" />
                        </el-icon>
                        <h4 v-if="title">{{title}}</h4>
                    </div>
                </div>
            </slot>
        </el-upload>
        <span style="display:none!important"><el-input v-model="value"></el-input></span>
        <el-dialog title="剪裁" draggable v-model="cropperDialogVisible" :width="580" @closed="cropperClosed" destroy-on-close>
            <sc-cropper :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
        <el-dialog title="剪裁" draggable v-model="cropperDialogVisible" :width="580" @closed="cropperClosed"
            destroy-on-close>
            <sc-cropper :src="cropperFile.tempCropperFile" :compress="compress" :aspectRatio="aspectRatio"
                ref="cropper"></sc-cropper>
            <template #footer>
                <el-button @click="cropperDialogVisible=false" >取 消</el-button>
                <el-button type="primary" @click="cropperSave">确 定</el-button>
@@ -116,7 +110,10 @@
        },
        methods: {
            getHost () {
                if (this.host) return this.hostNew = this.host
            if (this.host) {
                this.hostNew = this.host
                return Promise.resolve()
            }
                return this.$API.setting.component.getImgHost.get().then(res => {
                    this.hostNew = res.data + '/visual/'
                })
@@ -264,31 +261,134 @@
</script>

<style scoped>
    .el-form-item.is-error .sc-upload .el-upload--picture-card {border-color: var(--el-color-danger);}
    .sc-upload .el-upload--picture-card {border-radius: 0;}
.el-form-item.is-error .sc-upload .el-upload--picture-card {
    border-color: var(--el-color-danger);
}

    .sc-upload .uploader,.sc-upload:deep(.el-upload) {width: 100%;height: 100%;}
.sc-upload .el-upload--picture-card {
    border-radius: 0;
}

    .sc-upload__img {width: 100%;height: 100%;position: relative;}
    .sc-upload__img .image {width: 100%;height: 100%;}
    .sc-upload__img-actions {position: absolute;top:0;right: 0;display: none;}
    .sc-upload__img-actions span {display: flex;justify-content: center;align-items: center;width: 25px;height:25px;cursor: pointer;color: #fff;}
    .sc-upload__img-actions span i {font-size: 12px;}
    .sc-upload__img-actions .del {background: #F56C6C;}
    .sc-upload__img:hover .sc-upload__img-actions {display: block;}
    .sc-upload__img-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;font-size: 12px;background-color: var(--el-fill-color-lighter);}
.sc-upload .uploader,
.sc-upload:deep(.el-upload) {
    width: 100%;
    height: 100%;
}

    .sc-upload__uploading {width: 100%;height: 100%;position: relative;}
    .sc-upload__progress {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-color: var(--el-overlay-color-lighter);z-index: 1;padding:10px;}
    .sc-upload__progress .el-progress {width: 100%;}
    .sc-upload__uploading .image {width: 100%;height: 100%;}
.sc-upload__img {
    width: 100%;
    height: 100%;
    position: relative;
}

    .sc-upload .file-empty {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
    .sc-upload .file-empty i {font-size: 28px;}
    .sc-upload .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 8px;}
.sc-upload__img .image {
    width: 100%;
    height: 100%;
}

    .sc-upload.sc-upload-round {border-radius: 50%;overflow: hidden;}
    .sc-upload.sc-upload-round .el-upload--picture-card {border-radius: 50%;}
    .sc-upload.sc-upload-round .sc-upload__img-actions {top: auto;left: 0;right: 0;bottom: 0;}
    .sc-upload.sc-upload-round .sc-upload__img-actions span {width: 100%;}
.sc-upload__img-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.sc-upload__img-actions span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    cursor: pointer;
    color: #fff;
}

.sc-upload__img-actions span i {
    font-size: 12px;
}

.sc-upload__img-actions .del {
    background: #F56C6C;
}

.sc-upload__img:hover .sc-upload__img-actions {
    display: block;
}

.sc-upload__img-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    background-color: var(--el-fill-color-lighter);
}

.sc-upload__uploading {
    width: 100%;
    height: 100%;
    position: relative;
}

.sc-upload__progress {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--el-overlay-color-lighter);
    z-index: 1;
    padding: 10px;
}

.sc-upload__progress .el-progress {
    width: 100%;
}

.sc-upload__uploading .image {
    width: 100%;
    height: 100%;
}

.sc-upload .file-empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sc-upload .file-empty i {
    font-size: 28px;
}

.sc-upload .file-empty h4 {
    font-size: 12px;
    font-weight: normal;
    color: #8c939d;
    margin-top: 8px;
}

.sc-upload.sc-upload-round {
    border-radius: 50%;
    overflow: hidden;
}

.sc-upload.sc-upload-round .el-upload--picture-card {
    border-radius: 50%;
}

.sc-upload.sc-upload-round .sc-upload__img-actions {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
}

.sc-upload.sc-upload-round .sc-upload__img-actions span {
    width: 100%;
}
</style>