Question

我正在使用Bootstrap-Vue模态，并且想阻止它打开。我不确定如何阻止默认行为。

   <b-img
      ref='cal-modal-button'
      id='cal-modal-button'
      class="cal-icon"
      v-bind:src="imagePath + calimage"
      v-b-modal.date-time-modal
      >
   </b-img>

然后按如下所示设置精简模式：

<b-modal id="date-time-modal" name="header-modal" ref="date-time-modal" hide-footer title="Set Date and Time">
   ...
</b-modal>

有没有一种方法可以防止不使用JQuery弹出它？

Answer 1

从文档中，您可以使用show事件来取消模态：

<template>
  // ...
  <b-modal @show="onShow" ... />
</template>
<script>
export default {
  // ...
  data:() => ({
    modalDisabled:true
  }),
  methods: {
    onShow(bvModalEvt) {
      if(this.modalDisabled) {
        bvModalEvt.preventDefault()
      }
    }
  }
}
</script>

show事件参考： https://bootstrap-vue.js.org/docs/components/modal/#comp-ref-b-modal-events

总是在模态显示之前发出。取消

BvModalEvent对象。调用bvModalEvt.preventDefault（）取消显示

防止打开Bootstrap-Vue模式

1 个答案: