通常写法:
<div class="text-center"> <b-modal visible centered id="send-pin-modal" header="test" title="cjavapy编程之路" hide-footer hide-header-close no-close-on-backdrop no-close-on-esc> <div class="col-12 text-center"> <!--<p class="col-12">After being approved, the disbursement cannot be undone.</p>--> </div> <div class="col-12"> <div class="ml-5 mr-5"> <b-form-input type="password" id="pin-input" v-model="pin" required></b-form-input> </div> </div> <div class="col-12 text-center"> <slot name="pin-error" class="text-danger text-center" v-show="comment">{{comment}}</slot> </div> <div class="col-12"> </div> <div class="col-12 text-center"> <b-button variant="primary" size="sm" class="mt-2 mr-2" @click="verifyPin">Continue</b-button> <b-button variant="danger" size="sm" class="mt-2 ml-2" @click="hidePinModal">Cancel</b-button> </div> </b-modal> </div>
注意:上面title是通过属性设置的,设置标题居中是不生效的。
设置模态(modal)提示框组件的title标题居中:
new Vue({ el: '#my-app', data: { comment: 'Some comment', pin: '', } });
<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.min.css" /> <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <div id="my-app"> <b-modal visible centered id="send-pin-modal" header="test" title="Confirm Approval" hide-footer hide-header-close no-close-on-backdrop no-close-on-esc> <template #modal-header> <div class="mx-auto"> <h5>cjavapy编程之路</h5> </div> </template> <div class="col-12"> <div class="ml-5 mr-5"> <b-form-input type="password" id="pin-input" v-model="pin" required></b-form-input> </div> </div> <div class="col-12 text-center"> <slot name="pin-error" class="text-danger text-center" v-show="comment">{{comment}}</slot> </div> <div class="col-12"> </div> <div class="col-12 text-center"> <b-button variant="primary" size="sm" class="mt-2 mr-2">Continue</b-button> <b-button variant="danger" size="sm" class="mt-2 ml-2">Cancel</b-button> </div> </b-modal> </div>
注意:该方法是将默认标题部分替换为自定义标题,并设置使用class="mx-auto"
样式 。
或者,可以header-class="justify-content-center"
设置title居中,
例如,
new Vue({ el: '#my-app', data: { comment: 'Some comment', pin: '' } });
<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@2.21.2/dist/bootstrap-vue.min.css" /> <script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script> <div id="my-app"> <b-modal visible centered id="send-pin-modal" header="test" header-class="justify-content-center" title="cjavapy编程之路" hide-footer hide-header-close no-close-on-backdrop no-close-on-esc> <div class="col-12"> <div class="ml-5 mr-5"> <b-form-input type="password" id="pin-input" v-model="pin" required></b-form-input> </div> </div> <div class="col-12 text-center"> <slot name="pin-error" class="text-danger text-center" v-show="comment">{{comment}}</slot> </div> <div class="col-12"> </div> <div class="col-12 text-center"> <b-button variant="primary" size="sm" class="mt-2 mr-2">Continue</b-button> <b-button variant="danger" size="sm" class="mt-2 ml-2">Cancel</b-button> </div> </b-modal> </div>