javascript - 将分页符添加到Vue-Multipane组件

我的用例在使用Vue-multipane组件时遇到问题，但找不到解决方案。

当屏幕尺寸小于768px时，我试图禁用多窗格，并显示全角行而不是列。因此，我的页面在移动设备上的可用性更好。

现在我有两个问题：

如果屏幕尺寸小于768像素，则缩小的窗格不会最大化到100％（请参见下面的屏幕截图）。因此，首先使用手柄减小窗格的宽度，然后将窗口宽度减小到断点786px以下，以查看上述行为。
如果将屏幕尺寸减小到768-770px（接近分页符），则看不到句柄。分页符未激活，但句柄不可见。不知道出了什么问题-也许很容易解决，但我还找不到办法。

（手柄缺失）

缩小到767像素（应最大化到100％）-减少窗格而不是减少窗口宽度：

它看起来应该是这样的（在页面加载时它可以正确显示）：

请查看此fiddle或下面的代码。

但是最好去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/[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>

最佳答案

我想我已经找到解决问题的方法。（具有分页符位置的句柄问题修复有些棘手，但可以。）

让我解释一下我做了什么：

如果屏幕小于768px，我将类full_width添加到左侧窗格中，以使用此Vue代码width: 100% !important将窗格最大化至:class="{full_width: !largeScreen}"
如果将分页符位置设置为768px，则手柄丢失。我将位置降低了17px（看起来像边框的15px + 2px的填充-但是我无法使用CSS更改此设置），然后它就可以了。因此，在largeScreen的计算属性内，我将像这样返回它：return this.screenWidth > (768 - 17);（我已经通过控制台记录了屏幕尺寸对它进行了测试。）

请查看此fiddle。

我已经向您说明了手柄问题，以及如果我将位置更改为17像素，为什么它还能正常工作-请让我知道。

解决方案是好的，似乎对我有用。也许我正在Vue多窗格回购中提出问题。对于功能请求，因为如果直接将其添加到Multipane组件中可能会更容易，并且如果将断点与属性一起使用会很不错。

关于javascript - 将分页符添加到Vue-Multipane组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46626249/