为 Vue-Multipane 组件添加分页功能

Question

我在我的用例中遇到了Vue-multipane 组件的问题，我没有找到解决方案。

一旦屏幕尺寸小于 768 像素，我会尝试禁用多窗格并显示全宽行而不是列。所以我的页面在移动设备上更好用。

现在我有两个问题：

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

（缺少句柄）

缩小到 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/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 代码 :class="{full_width: !largeScreen}" 将窗格最大化到 width: 100% !important
• 如果我将分页符位置设置为 768 像素，则句柄丢失。我已经将位置减少了 17px（看起来像距边框 15px + 2px 的填充 - 但我无法用 css 更改它）然后它就可以工作了。因此，在 largeScreen 的计算属性中，我将其返回如下：return this.screenWidth > (768 - 17);（我已通过控制台记录屏幕大小对此进行了测试。）

请看看这个fiddle。

我知道如果我将位置更改 17 像素，手柄问题以及为什么它会起作用 - 请告诉我。

解决方案没问题，似乎对我有用。也许我在 Vue-multipane repo 提交了一个问题。对于功能请求，因为如果直接将其添加到 Multipane 组件中可能会更容易，并且如果使用属性传递断点会很好。