bootstrap-vue - 基于布尔值显示按钮

Question

当我点击 Launch centered modal 时，我希望模式隐藏按钮 x、cancel 和 ok，因为 showButton 是 false。

在我点击 show button 之后，应该会显示模式按钮，因为现在 showButton 为真。

我应该怎么做？

App.vue

<template>
  <div id="app">
    <b-button v-b-modal.modal-center>Launch centered modal</b-button>
    <b-modal id="modal-center" centered title="BootstrapVue">
      <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>

Codesandbox
https://codesandbox.io/s/flamboyant-herschel-62wpt?file=/src/App.vue:0-587

Answer 1

您可以使用 hide-header-close 和 hide-footer 属性。记录在这里。 Modal docs

<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="!this.showButton"
      :hide-footer="!this.showButton"
    >
      <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>

例子 https://codesandbox.io/s/hungry-architecture-zrcqj?file=/src/App.vue

bootstrap-vue - 基于布尔值显示按钮

bootstrap-vue - show button based on boolean

html

javascript

css

vue.js

bootstrap-4