BootstrapVue如何根据布尔值动态控制模态框x、取消、确认按钮显隐

实现方案 #

你可以直接利用 BootstrapVue 内置的 <b-modal> 组件属性实现按钮显隐控制，修改逻辑如下：

• 控制右上角X关闭按钮显隐：绑定 hide-header-close 属性，值为 true 时隐藏按钮
• 控制底部OK确认按钮显隐：绑定 no-ok-button 属性，值为 true 时隐藏按钮
• 控制底部Cancel取消按钮显隐：绑定 no-cancel-button 属性，值为 true 时隐藏按钮
• 额外增加模态框关闭事件监听，每次关闭后重置showButton状态，避免下次打开时状态残留

修改后的完整代码如下：

<template>
  <div id="app">
    <b-button v-b-modal.modal-center>Launch centered modal</b-button>
    <b-modal 
      id="modal-center" 
      centered 
      title="BootstrapVue"
      :hide-header-close="!showButton"
      :no-ok-button="!showButton"
      :no-cancel-button="!showButton"
      @hide="showButton = false"
    >
      <p class="my-4">Vertically centered modal!</p>
      <button @click="setShowButton">Show Button</button>
    </b-modal>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      showButton: false,
    };
  },
  methods: {
    setShowButton() {
      this.showButton = true;
    },
  },
};
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果示意图：

内容的提问来源于stack exchange，提问作者CCCC