在 Vue 3 的輸入中選擇文件后如何激活引導模式？

Question

所以，我正在做一個聊天組件，我們可以選擇發送文件，但在發送之前，用戶必須查看它，為此我想顯示一個包含所有選定文件的模式，但我只能在選擇文件后立即顯示模式，我嘗試了 getElementById 但它沒有用。

這是我的模板：

    <input type="file" multiple name="file" id="fileInput" class="hidden-input" @change="onChange"
       ref="file" accept=".pdf,.jpg,.jpeg,.png" hidden />
    <button type="button" @click="chooseFiles()" class="btn btn-link text-decoration-none emoji-btn"
       id="emoji-btn">
       <i class="las la-arrow-up align-middle" />
    </button>

這是我的腳本：

    chooseFiles() {
      document.getElementById("fileInput").click()
      // document.getElementById("showModal").click()
    },
    onChange(e) {
      this.$refs.file.files = e.target.files
      this.files.push(...this.$refs.file.files)
      this.fileSize(e)
      // document.getElementById("showModal").click()
    },

這是模式：

  <div id="showModal" class="modal fade" ref="modal" tabindex="-1" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          <div v-for="file in files" :key="file.name" class="preview-card border rounded">
            <div class="d-flex align-items-center p-2">
              <b-img v-if="file.type != 'application/pdf'" class="img-thumbnail me-2" alt="200x200" width="200"
                :src="generateURL(file)" data-holder-rendered="true" />
              <iframe v-else class="img-thumbnail me-2" data-holder-rendered="true" frameBorder="0" scrolling="no"
                alt="200x200" width="200" :src="generateURL(file)" />
              <div class="flex-grow-1">
                <div class="pt-1">
                  <h5 class="fs-11 mb-1" data-dz-name="">
                    {{ file.name }}
                  </h5>
                  <p class="fs-9 text-muted mb-0" data-dz-size="">
                    <strong>{{ (file.size / 1024) / 1000 }}</strong> MB
                  </p>
                  <strong class="error text-danger" data-dz-errormessage="" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <b-button type="button" class="btn btn-danger" data-bs-dismiss="modal">
            Sair
          </b-button>
        </div>
      </div>
    </div>
  </div>

Answer 1

當我發表評論時，我錯過了這個被標記為bootstrap-modal的事實，所以我現在明白你想要打開一個具有特定激活方法的引導模式。 對於 bootstrap 5，您可以使用bootstrap.Modal.getOrCreateInstance()獲取 Modal 實例。 將其分配給數據屬性，然后您可以在其上調用所有典型的模態方法，如.show() 、 .toggle() ) 、 .hide( .hide()等。下面是一個使用比您自己的模態更簡化的模態的工作示例為了簡單起見。

<div id="app">
  <input type="file" multiple name="file" id="fileInput" class="hidden-input" @change="onChange"
         ref="file" accept=".pdf,.jpg,.jpeg,.png" hidden />
  <button type="button" @click="chooseFiles" class="btn btn-link text-decoration-none emoji-btn"
          id="emoji-btn">
    choose files
  </button>
  
  <!-- Modal -->
  <div class="modal fade" ref="modal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Files</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div v-for="(file, i) in files" :key="i">
          {{ file.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  data() {
    return {
      files: [],
      modal: null
    }
  },
  mounted() {
    const myModalEl = this.$refs.modal
    this.modal = bootstrap.Modal.getOrCreateInstance(myModalEl)
  },
  methods: {
    chooseFiles() {
        this.$refs.file.click()
    },
    onChange(e) {
      this.$refs.file.files = e.target.files
      this.files.push(...this.$refs.file.files)
      this.modal.show()
    },
  }

這是帶有上述代碼的沙箱

如果 bootstrap 5 安裝為 package 你可以這樣做：

import { Modal } from "bootstrap";
.
.
.
mounted() {
  this.modal = new Modal(this.$refs.modal);
}