element-plus [Bug Report] [Component] [upload] 上传组件 list-type=picture-card且show-file-list=false时,不显示上传组件

4bbkushb  于 2023-03-19  发布在  其他
关注(0)|答案(2)|浏览(423)

Bug Type: Component

Environment

  • Vue Version: 3.2.33
  • Element Plus Version: 2.2.0
  • Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36
  • Build Tool: Vite

Reproduction

  • el-upload

Element Plus Playground

Steps to reproduce

<template>
  <el-upload
    class="upload-demo"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
    :show-file-list=false
             
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        上面看不到上传组件<br>
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
</script>

What is Expected?

显示上传组件

What is actually happening?

不显示上传组件

Additional comments

(empty)

ws51t4hk

ws51t4hk1#

picture-card目前是作为照片墙使用的,你可以尝试其他模式搭配trigger插槽

<template #trigger>
  <div class="el-upload el-upload--picture-card" tabindex="0">
    <el-icon><Plus class="el-icon" /></el-icon>
    <input class="el-upload__input" name="file" accept="" type="file"></div>
</template>
lo8azlld

lo8azlld2#

picture-card目前是作为照片墙使用的,你可以尝试其他模式搭配trigger插槽

<template #trigger>
  <div class="el-upload el-upload--picture-card" tabindex="0">
    <el-icon><Plus class="el-icon" /></el-icon>
    <input class="el-upload__input" name="file" accept="" type="file"></div>
</template>

PR;9607有人提交了,可否合并,项目中也遇到了这种情况

相关问题