1
我在使用案例中遇到Vue-multipane組件的問題，但我找不到解決方案。向Vue-Multipane組件添加分頁功能
我試圖在屏幕尺寸小於768px時禁用多窗格，並顯示全寬行而不是列。所以我的網頁在手機上更好用。
現在我有兩個問題：
- 收縮窗格中沒有得到最大化爲100％，如果屏幕尺寸小於768px（見下截圖）。因此，首先用手柄減小窗格的寬度，然後將窗口寬度減小到折點786px以下，以查看提到的行爲。
- 如果將屏幕尺寸縮小到768 - 770像素（靠近分頁符），手柄不可見。分頁符不活動，但句柄不可見。不知道有什麼不對 - 也許這很容易解決，但我還找不到方法。
（缺少手柄）
收縮到767px（應該最大化爲100％） - 降低面板比減少窗口的寬度： 
它應該像這樣（在頁面加載它顯示正確）： 
請看看這個fiddle或下面的代碼。
但最好去jsfiddle，因爲它更容易調整大小和測試提到的行爲。
我一直試圖解決的問題：
- 添加CSS樣式
flex-grow: 1和width: 100%;到left-pane的媒體查詢但不工作。 - 對於句柄問題：我已經改變了一點斷點位置，但行爲仍然存在。
說明：我用Firefox測試了代碼。
//console.log(Multipane, window)
const PageBreak = {
\t data() {
return {
screenWidth: document.documentElement.clientHeight,
}
},
\t computed: {
\t largeScreen() {
\t 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({
\t 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/[email protected]/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>