将分页功能添加到Vue-Multipane组件

Question

我的用例中遇到Vue-multipane组件问题而我找不到解决方案。

我试图在屏幕尺寸小于768px时禁用多面板并显示全宽行而不是列。所以我的页面在移动设备上更好用。

现在我遇到两个问题：

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

（缺少句柄）

缩小到767px（应最大化为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/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

我想我找到了解决问题的方法。 （具有分页位置的句柄问题修复有点hacky但有效。）

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

• 如果屏幕小于768像素，我在左侧窗格中添加了课程full_width，以使用此Vue代码width: 100% !important
将窗格最大化为:class="{full_width: !largeScreen}"
• 如果我将分页位置设置为768px，则手柄丢失。我已经将位置减少了17px（看起来像边界填充15px + 2px - 但我无法用css改变它）然后它正在工作。所以在largeScreen的计算属性中我会像这样返回它：return this.screenWidth > (768 - 17);（我已通过控制台记录屏幕大小来测试它。）

请查看此fiddle。

我已经解决了句柄问题，以及如果我将位置改为17px，它的工作原理 - 请告诉我。

解决方案没问题，似乎对我有用。也许我在Vue-multipane repo上提出了一个问题。对于一个功能请求，因为它可能更容易直接添加到Multipane组件中，如果传递一个属性的断点就可以了。