bonus
/
mallBackend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

上传组件优化

This commit is contained in:
13218645326 2023-12-05 20:12:35 +08:00
parent 1e60aeb65a
commit 60a6934b28
2 changed files with 57 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/com/uploadCom.vue
View File

@ -1,16 +1,14 @@
<template>
<div>
<div class="upload_ss_c">
<!--action="/api/abk/web/v1/resource/file" -->
<el-upload :action="actionUrl" :auto-upload="autoUpload" style="width: 100%" :on-success="(response, file) => successUpload(response, file)"
:on-error="errorUpload" :accept="acceptTypeList.join(',')" :before-upload="beforeUpload" :multiple="multiple"
:limit="maxLimit" :on-exceed="handleExceed" :file-list="fileList" :disabled="disabledFlag"
<el-upload :action="actionUrl" :auto-upload="autoUpload" style="width: 100%"
:on-success="(response, file) => successUpload(response, file)" :on-error="errorUpload"
:accept="acceptTypeList.join(',')" :before-upload="beforeUpload" :multiple="multiple" :limit="maxLimit"
:on-exceed="handleExceed" :file-list="fileList" :disabled="disabledFlag"
:on-remove="(file, fileList) => removeFile(file, fileList)" :on-preview="(file) => preview(file)"
:on-progress="(event, file, fileList) => onProgressFn(event, file, fileList)"
list-type="picture-card"
>
:on-progress="(event, file, fileList) => onProgressFn(event, file, fileList)" list-type="picture-card">
<!-- 上传的按钮 或者 icon 通过具名插槽的方式 -->
<slot name="uploadBtn"></slot>
<slot name="default"></slot>
</el-upload>
<el-progress v-if="showProcessFlag && processFlag" :percentage="loadProcess"></el-progress>
</div>
@ -26,6 +24,16 @@ const props = defineProps({
type: String,
default: '',
},
width: {
//上传的地址
type: String,
default: '72px',
},
height: {
//上传的地址
type: String,
default: '72px',
},
autoUpload: {//是否开启自动上传
type: Boolean,
default: false
@ -229,5 +237,15 @@ const preview = (data) => {
<style lang="scss" scoped></style>
<style lang="scss" scoped>
:deep(.el-upload){
width: v-bind('props.width')!important;
height: v-bind('props.height')!important;
}
:deep(.el-upload-list__item){
width: v-bind('props.width')!important;
height: v-bind('props.height')!important;
}
</style>
<style></style>

7
src/views/configuration/swiperConfig/com/addCom.vue
View File

@ -5,11 +5,14 @@
<el-input v-model.trim="form.title" placeholder="请输入标题" clearable maxlength="30" />
</el-form-item>
<el-form-item label="图片：" prop="picture">
<uploadCom :maxLimit="3" listType="picture-card" :acceptTypeList="['.jpg','.jpeg','.png']">
<template v-slot:uploadBtn>
<uploadCom :maxLimit="3" listType="picture-card" :acceptTypeList="['.jpg','.jpeg','.png']" width="72px" height="72px">
<template v-slot:default>
<el-icon size="48" color="#aaa"><Plus /></el-icon>
</template>
</uploadCom>
</el-form-item>
<el-form-item label="跳转链接：" prop="linkUrl">
<el-input v-model.trim="form.linkUrl" clearable />