使用插槽确定可点击的元素/触发不可见 type="file" 输入标记的输入事件

问题描述

我有一个基本组件,它应该能够将多个文件上传到 Firestore。由于我希望能够在我的应用程序中的多个点上使用此组件,因此我想利用插槽的优势,以便我可以更改覆盖隐藏输入标签的元素。所以不管是按钮,svg等等,我还是希望输入触发点击事件。

目前,只有认的 img 标签可以触发 @change 事件。

我需要传递更多的道具吗?在我目前的状态下,我如何才能使这项工作发挥作用?

如果您需要更多信息,请告诉我!

干杯!

注意:我还没有让 Firestore 上传的多文件选择生效,但我正在努力。

UploadMediaFiles.vue(子)

<template>
  <div class="upload-media-files">
    <input
      id="input-file"
      type="file"
      accept="image/*"
      @change="addMedia"
      class="_add-media-input"
    />
   <label for="input-file">
    <slot>
        <img
          src="https://www.clipartmax.com/png/middle/142-1422132_png-file-svg-upload-file-icon-png.png"
          alt=""
        />
    </slot>
   </label>
  </div>
</template>

<script>
export default {
  name: 'UploadMediaFiles',props: {
    multiple: { type: Boolean },accept: { type: String },},data() {
    return {
      files: [],}
  },computed: {},methods: {
    async addMedia(event) {
      const selectedFiles = event.target.files
      console.log(`selectedFiles → `,selectedFiles)
      this.files.push(selectedFiles)
      this.$emit('selected',this.files)
    },}
</script>

SelectAndPreviewFiles(父级)

<template>
  <div class="select-and-preview-files">
    <UploadMediaFiles accept="image/*" :multiple="true" @selected="(files) => doSomething(files)">
      <button>upload file</button>
    </UploadMediaFiles>
  </div>
</template>

<script>
import UploadMediaFiles from '../atoms/UploadMediaFiles.vue'
export default {
  name: 'SelectAndPreviewFiles',components: {
    UploadMediaFiles,props: {},data() {
    return {}
  },methods: {
    doSomething(files) {
      console.log(`files → `,files)
    },}
</script>

解决方法

您可以将一个方法传递给调用隐藏输入的 zipfile-handler:

  1. click 中,向输入添加模板引用:

    UploadMediaFiles
  2. <input ref="myInput"> 中,创建一个调用输入的 UploadMediaFiles-handler 的组件方法:

    click
  3. export default { methods: { openFileDialog() { this.$refs.myInput.click() } } } 中,将组件方法传递给槽:

    UploadMediaFiles
  4. <slot :openFileDialog="openFileDialog"> 中,将 slot 属性绑定为按钮的 SelectAndPreviewFiles 处理程序:

    click

demo

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...