拖动上传组件内部自定义组件，保留拖动上传

忆琳2025-01-08 16:47

遇到一个需求：拖动上传组件内部自定义组件保留拖动上传，其他上传方式取消（点击上传，有焦点回车上传）保留内容自定义组件.记录下

1.这里举例vue2+antdesign vue1.x(上传组件)+elementui2.12.0（内部组件输入框）保留拖动上传，可支持输入。

xml 复制代码

<a-upload-dragger  name="file" :multiple="false" accept="image/*" :file-list="[]" :custom-request="OCRVin" ref="uploadDragger">
    <div class="upload-overlay" @click.stop  @keydown.enter.stop="textareaEnter"> <!-- 覆盖点击事件 -->
         <el-input  type="textarea" v-model="searchValue" :rows="1" placeholder="请输入" resize="none">
         </el-input></div>
</a-upload-dragger>

css：

css 复制代码

.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1; /* 确保覆盖在内容之上 */
    pointer-events: auto; /* 默认情况下，这个值可能是 none，但我们需要设置为 auto 来接收点击事件，然后通过 @click.stop 来阻止它冒泡 */
    /* 可以添加透明背景或其他样式来避免影响用户体验 */
    background-color: rgba(0, 0, 0, 0); /* 透明背景 */
  }

(vue->mothods)js:

scss 复制代码

textareaEnter(e){
    //阻止事件冒泡
    e.stopPropagation();
},

2.再举例vue3+element plus(可拖动上传的展示图片）

ini 复制代码

<el-upload
    v-model:file-list="fileList"
    class="uploadBigImg"
    ref="uploadFolder"
    accept="image/*"
    :show-file-list="false"
    list-type="picture"
    :http-request="uploadHttpRequest"
    drag
    @click.stop="()=>{}"
    @keydown.enter.stop="imgEnter"
    >
    <!-- 覆盖点击事件 -->
    <div class="upload-overlay" @click.stop >
       <div class="imgBox" @click.stop="changeFocus">
           <el-image class="bigImg" :src="currentImg.url" fit="contain" ref="bigImg"
                                :preview-src-list="[currentImg.url]" />
       </div>
    </div>
</el-upload>

css同上 js：

scss 复制代码

imgEnter(e){
  //阻止默认事件
  e.preventDefault();
  //阻止事件冒泡
  e.stopPropagation();
  return;
},

至此2种举例完成，希望能帮助到你.感谢阅读