Я использую оверлей bootstrap - vue на странице с длинным контентом, прокручиваемым через окно браузера.
<b-overlay :show="loading">
Наложение корректно покрывает весь контент, даже часть ниже области просмотра, но встроенный спиннер оверлея центрируется на содержимом, а не на области просмотра, поэтому спиннер оказывается вблизи или ниже нижней части области просмотра, когда содержимое достаточно длинное.
пробовал пользовательский контент через слот, как это ...
<b-overlay :show="loading">
<template v-slot:overlay>
<div style="???" class="text-center">
<p style="???">Make me a spinner and center me on the viewport</p>
<b-button
</div>
</template>
... с десятками идей для style="???", включая position:absolute с разными вершинами, включая top=50vh, включая !important разбросаны и т. д. c., но контент не сдвинулся с места.
// Note that this snippet doesn't run, because I don't see a way to get
// bootstrap-vue via CDN
var app = new Vue({
el: '#app',
data: function() {
return {
message: 'Hello Vue!',
messages: []
}
},
mounted() {
for (let i=0; i<50; i++)
this.messages.push(i)
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<b-overlay :show="true">
{{ message }}
<!-- long content below extends the overlay size -->
<!-- this moves the spinner down and off the viewport -->
<ul>
<li v-for="m in messages" :key="m">{{m}}</li>
</ul>
</b-overlay>
</div>
Я думаю, ключом к решению этой проблемы является поиск селектора CSS, который позволяет мне изменить положение счетчика на «фиксированное», а не на «абсолютное», которое кажется, что bootstrap генерирует.
