element-plus 当使用拖拽上传时会出现上下40的内边径

原创已于 2024-12-12 09:32:25 修改 · 5.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2024-12-11 15:30:30 首次发布

问题效果

解决方法：

drag是继承的el-upload的padding的属性值

所以我们直接修改el-upload的值就可以

修改前：

修改后：

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
const model=defineModel<any>({
    default:()=>""
})
 
const emit = defineEmits(["update"])
const isUploading=ref(false)
async function onChange(file:any){
    isUploading.value=true
    let apiAction="自己的接口"
    const formData = new FormData();
   // 参数
    ...
    const rs=await http.rawPostFormData(apiAction,formData)
    const jo=await rs.json()
    if(jo.Msg){
        ElNotification({
            title: '系统提示',
            message: jo.Msg,
            type: jo.Code===0 ?"success":"error",
            appendTo: document.body,
            zIndex: 9999
        })
    }
    if(jo.Code===0){
        model.value=jo.Model
    }
    emit("update")
    isUploading.value=false
}
</script>

<template>
    <el-upload
        multiple
        :limit="1"
        accept="image/*"
        drag
        :show-file-list="false"
        :auto-upload="false"
        :on-change="onChange"
        v-loading="isUploading"
    >
        <el-image fit="scale-down" style='height: 70px; width: 80px;' v-if="model" :src="model"  />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
</template>

<style scoped>
:deep(.el-upload) {
  --el-upload-dragger-padding-horizontal: 10px;
  --el-upload-dragger-padding-vertical: 10px;
  height: 100px; width: 100px;
}
:deep(.el-icon) {
   height: 80px; width: 80px;
 }
</style>

解决之后的效果