將分頁符添加到Vue-Multipane組件

Question

我在用例中遇到Vue多窗格組件的問題，但沒有找到解決方案。

當屏幕尺寸小於768px時，我試圖禁用多窗格，並顯示全角行而不是列。 因此，我的頁面在移動設備上的可用性更好。

現在我有兩個問題：

• 如果屏幕尺寸小於768像素，則縮小的窗格不會最大化到100％（請參見下面的屏幕截圖）。 因此，首先使用手柄減小窗格的寬度，然后將窗口寬度減小到斷點786px以下，以查看上述行為。
• 如果將屏幕尺寸減小到768-770px（接近分頁符），則看不到句柄。 分頁符未激活，但句柄不可見。 不知道出了什么問題-也許很容易解決，但我還找不到辦法。

（手柄缺失）

縮小到767像素（應最大化到100％）-減少窗格而不是減少窗口寬度：

它看起來應該是這樣的（在頁面加載時它可以正確顯示）：

請看看這個小提琴或下面的代碼。

但是最好去jsfiddle，因為它更容易調整和測試所提到的行為。

我試圖解決的問題：

• 添加CSS樣式flex-grow: 1和width: 100%; 進入left-pane的媒體查詢中，但這不起作用。
• 對於句柄問題：我已經稍微更改了斷點位置，但是行為仍然存在。

注意：我已經使用Firefox測試了代碼。

 //console.log(Multipane, window) const PageBreak = { data() { return { screenWidth: document.documentElement.clientHeight, } }, computed: { largeScreen () { return this.screenWidth > 768; // 10px for handle } }, // bind event handlers to the `handleResize` method (defined below) mounted: function () { window.addEventListener('resize', this.handleResize) }, beforeDestroy: function () { window.removeEventListener('resize', this.handleResize) }, methods: { // whenever the document is resized, re-set the 'fullHeight' variable handleResize (event) { this.screenWidth = document.documentElement.clientWidth } } } new Vue({ el: '#app', mixins: [ PageBreak ] }) 

 .custom-resizer { width: 100%; height: 400px; } .custom-resizer > .pane { text-align: left; padding: 15px; overflow: hidden; background: #eee; border: 1px solid #ccc; } .custom-resizer > .multipane-resizer { margin: 0; left: 0; position: relative; } .custom-resizer > .multipane-resizer:before { display: block; content: ""; width: 3px; height: 40px; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -1.5px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } .custom-resizer > .multipane-resizer:hover:before { border-color: #999; } .left-pane { width: 50%; } @media (max-width: 768px) { /* stack panes if smaller than 768px*/ .multipane.layout-v { /*flex-direction: column;*/ display: block; } .left-pane { /*flex-grow: 1;*/ /* how to maximize left-pane if it was shrinked before? */ width: 100%; } } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> <script src="https://unpkg.com/vue-multipane@0.9.5/dist/vue-multipane.min.js"></script> <div id="app"> <multipane class="custom-resizer" layout="vertical"> <div class="pane left-pane"> <div> <h6 class="title is-6">Pane 1</h6> </div> </div> <multipane-resizer v-if="largeScreen"></multipane-resizer> <div class="pane" :style="{ flexGrow: 1 }"> <div> <h6 class="title is-6">Pane 2</h6> </div> </div> <!--<multipane-resizer></multipane-resizer> <div class="pane" :style="{ flexGrow: 1 }"> <div> <h6 class="title is-6">Pane 3</h6> </div> </div>--> </multipane> </div> 

Answer 1

我想我已經找到解決問題的方法。 （具有分頁符位置的句柄問題修復有些棘手，但可以。）

讓我解釋一下我做了什么：

• 如果屏幕小於768px，我將class full_width添加到左側窗格中以最大化窗格的width: 100% !important使用此Vue代碼width: 100% !important :class="{full_width: !largeScreen}"
• 如果將分頁符位置設置為768px，則手柄丟失。 我已經將位置降低了17px（看起來像距邊框的填充15px + 2px-但我無法使用CSS更改此設置），然后它就可以了。 因此，在largeScreen的計算屬性內，我將像這樣返回它： return this.screenWidth > (768 - 17); （我已經通過控制台記錄屏幕尺寸來測試了這一點。）

請看一下這個小提琴 。

我已經向您說明了手柄問題，並且如果我將位置更改了17px，為什么它還能正常工作-請讓我知道。

解決方案是好的，似乎對我有用。 也許我正在Vue多窗格回購中提出問題。 對於功能請求，因為如果直接將其添加到Multipane組件中可能會更容易，並且如果將斷點與屬性一起使用會很不錯。