jsx写element-plus的upload组件时，图片预览不生效？

Z时代
2024-03-11
分类：IT

代码如下，el-upload的slot部分代码写法正确吗？
图片上传后，预览图可以正常显示，但hover上去时，示例中显示放大、下载、删除按钮，本地下载按钮未显示，
预览按钮点击不生效，且都不进入handlePictureCardPreview这个方法中
删除按钮点击可以生效，图片直接删掉了，但也不进入handleRemove方法
哪里有问题？

<el-upload action="#" list-type="picture-card" auto-upload={false}>
  <el-icon>
  <Plus />
  </el-icon>
<div
  v-slots={{
  file: (file) => {
    <>
        <img
            class="el-upload-list__item-thumbnail"
            src={file.url}
            alt=""
        />
        <span class="el-upload-list__item-actions">
            <span
                class="el-upload-list__item-preview"
                onClick={(file) => {
                    handlePictureCardPreview(file);
                }}
            >
                <i class="el-icon-zoom-in" onClick={test}></i>
            </span>
            <span
                class="el-upload-list__item-delete"
                onClick={(file) => {
                    handleDownload(file);
                }}
            >
                <i class="el-icon-download"></i>
            </span>
            <span
                class="el-upload-list__item-delete"
                onClick={(file) => {
                    handleRemove(file);
                }}
            >
                <i class="el-icon-delete"></i>
            </span>
        </span>
    </>;
    },
}}
></div></el-upload>