當我點擊Launch centered modal，我預計模式隱藏的按鈕x，cancel并且ok因為 showButton是假的。
單擊 后show button，應顯示模態按鈕，因為現在showButton為 true。
我該怎么做？
應用程式
<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
uj5u.com熱心網友回復：
您可以使用hide-header-close和hide-footer屬性。記錄在這里。模態檔案
<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
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/355567.html
標籤：javascript html css Vue.js bootstrap-4
下一篇：如何為鏈接創建類或ID