0

我有一个基本组件，应该能够将多个文件上传到 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 {}
  },
  computed: {},
  methods: {
    doSomething(files) {
      console.log(`files → `, files)
    },
  },
}
</script>
4

1 回答 1

1

您可以将一个方法传递给调用隐藏输入的click-handler 的插槽：

  1. 在UploadMediaFiles中，将模板引用添加到输入：

    <input ref="myInput">

  2. 在UploadMediaFiles中，创建一个调用输入的click-handler 的组件方法：

    export default {
  methods: {
    openFileDialog() {
      this.$refs.myInput.click()
    }
  }
}

  3. 在UploadMediaFiles中，将组件方法传递给插槽：

    <slot :openFileDialog="openFileDialog">

  4. 在SelectAndPreviewFiles中，将 slot 属性绑定为按钮的click-handler：

    <UploadMediaFiles v-slot="{ openFileDialog }">
  <button @click="openFileDialog">Upload files</button>
</UploadMediaFiles>

演示

于 2021-05-03T18:52:47.033 回答