Question

我有一个项目，其中包含一个带有子vuejs文件的全局VueJS文件，具体取决于您所在的页面。

我正在尝试研究如何创建一个媒体管理器，我可以每页调用多次，并使用模式打开它，我可以选择图像或上传图像。我已经知道如何上传图片了。我需要的是一旦选择或上传图像并选择＆＃34;选择＆＃34;按下按钮它将关闭模态并将数组返回到调用它的原始元素并分配给该元素的变量。

示例是：我有一个名为article_image的vuejs元素，其变量名为＆＃34; article_image_data＆＃34;并包含一个按钮。创建按钮后，打开模态管理器，您需要选择所需的图像，然后按＆＃34;选择＆＃34;然后这个模态关闭并返回一个数组，该数组将被分配给＆＃34; article_image_data＆＃34;在同一页面上可能有一个＆＃34;类别＆＃34;部分也是如此。

Answer 1

为简单起见，在模态管理器中，听取文件输入上的更改事件。

<!-- ModalManager.vue -->
<template>
  <div class="modal">
    <input type="file" @change="$emit('selectedFiles', $event.target.files)">
  </div>
</template>

然后，从实施模式管理器的父母那里，您可以获得selectedFiles事件的文件列表。

<!-- ArticleImage.vue -->
<template>
  <ModalManager
    @selectedFiles="onSelectedFiles"
    v-if="modalOpen">
</template>

现在轻松处理FileList

export default {
  components: {
    ModalManager
  }
  data () {
    return {
      modalOpen: false,
      articleImageData: null,
    }
  },
  methods: {
    onSelectedFiles (fileList) {
      console.log('Received a FileList from ModalManager', fileList)
    }
  }
}

如果您需要对模式进行更深入的组件管理，您可以使用以下内容从下到上传播事件：

<element @childEvent="$emit('childEvent')">

但这个想法保持不变

全局媒体库返回数组VueJS

1 个答案: