当你看引导模式如何与jquery一起工作时，你会发现他们向模式添加了一个show类，并将模式的样式从style="display: none"更改为style="display:block"。
和一个div <div class="modal-backdrop fade show"></div>附加到主体，这个div是黑色的，覆盖在模态后面的背景上
要做到这一点，你可以这样做：

<template>
  <div>
    <button type="button" class="btn btn-primary" @click="toggleModal">My Modal</button>
    <div
      ref="modal"
      class="modal fade"
      :class="{show, 'd-block': active}"
      tabindex="-1"
      role="dialog"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
              @click="toggleModal"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
        </div>
      </div>
    </div>
    <div v-if="active" class="modal-backdrop fade show"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: false,
      show: false
    };
  },
  methods: {
    /**
     * when clicking on button in bootstrap
     * the modal style set to display and after that a show class add to modal
     * so to do that we will show modal-backdrop and set modal display to block
     * then after that we will add show class to the modal and we will use setTimeout
     * to add show class because we want show class to add after the modal-backdrop show and modal display change
     * to make modal animation work
     *
     */
    toggleModal() {
      const body = document.querySelector("body");
      this.active = !this.active;
      this.active
        ? body.classList.add("modal-open")
        : body.classList.remove("modal-open");
      setTimeout(() => (this.show = !this.show), 10);
    }
  }
};
</script>

codesandbox demo
希望这能对你有所帮助

我这样做了：

<template v-if="showDialog">
  <div class="modal show" style="display: block;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ title }}</h5>
        </div>
        <div class="modal-body">
          <p> some stuff here </p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" type="submit"
            @click="emitSearch">
            Search
          </button>
          <button class="btn btn-secondary" type="button"
            @click="$emit ('close')">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-backdrop show"></div>
</template>

我传递showDialog作为一个prop，但我猜它可能在data()中

问题是背景不再运作。我的意思是，我们希望当你点击外部的时候，模态会关闭，但是在这个例子中并不是这样。更好的解决方案是使用标准的HTML对话框。