Question

<b-button class="button-self" v-on:click="resetNow"  v-b-modal.modal-1>Register</b-button>
 
<b-modal id="modal-1" title="" class="modal-dialog modal-lg fade main-pop">
  <div class="modal-content">
    <div class="right-source" v-if="isRegisterFourth">
      <div class="proceed-section">
        <div class="icon-err"/>
          <div class="get_back-img"></div>
          <div>
            <button type="button" class="btn btn-secondary goto-home-err" @click="isRegisterFourth = !showForm">
              <b>OK</b>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</b-modal>

点击按钮，如何关闭弹窗。

Answer 1

在 ref 元素上设置 b-modal
点击“确定”按钮，调用函数 hideModal
最后使用this.$refs.modal1.hide();关闭模态

new Vue({
  el:"#app",
  data: () => ({ isRegisterFourth: true }),
  methods: { 
    hideModal() {
      this.$refs.modal1.hide();
    },
    resetNow() {} 
  }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <div>
    <b-button 
      class="button-self" 
      v-on:click="resetNow" 
      v-b-modal.modal-1
    >Register</b-button>
 
    <b-modal ref="modal1" id="modal-1" title="" class="modal-dialog modal-lg fade main-pop">
      <div class="modal-content">
        <div class="right-source" v-if="isRegisterFourth">
          <div class="proceed-section">
            <div class="icon-err"/><div class="get_back-img"></div>
            <div>
              <button 
                type="button" 
                class="btn btn-secondary goto-home-err" 
                @click="hideModal"
              ><b>OK!</b></button>
            </div>
          </div>
        </div>
      </div>
    </b-modal>
  </div>
</div>

Answer 2

default 中的 <b-modal> 槽公开了一个 hide 方法，您可以调用该方法来隐藏模态。您可以根据需要使用范围内的各种其他方法。您可以在 docs

上看到哪些

new Vue({
  el: "#app"
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app" class="p-3">
  <b-button v-b-modal.modal-1>Register</b-button>

  <b-modal id="modal-1">
    <template #default="{ hide }">
      <b-button @click="hide">
        Close Modal
      </b-button>
    </template>
  </b-modal>
</div>

BootstrapVue：如何在单击按钮时关闭弹出窗口/表单

2 个答案: