Добавить функцию разрыва страницы в компонент Vue-Multipane

Question

Добавить функцию разрыва страницы в компонент Vue-Multipane

1

У меня проблемы с компонентом Vue-multipane в моем случае использования, и я не нашел решения.

Я пытаюсь отключить мультипанель после того, как размер экрана меньше 768 пикселей и отобразит полные строки вместо столбцов. Поэтому моя страница лучше использовать на мобильных устройствах.

Теперь у меня две проблемы:

Термоусадочная панель не увеличивается до 100%, если размер экрана ниже 768 пикселей (см. Скриншоты ниже). Поэтому сначала уменьшите ширину панели с помощью ручки, а затем уменьшите ширину окна ниже точки разрыва 786px, чтобы увидеть указанное поведение.
Ручка не отображается, если уменьшить размер экрана до 768-770 пикселей (рядом с разрывом страницы). Разрыв страницы неактивен, но ручка не видна. Не уверен, что неправильно - может быть, это легко исправить, но я еще не нашел пути.

(отсутствует ручка)

Сжимается до 767px (должно быть увеличено до 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/[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>

AWolf 08 окт. 2017, в 02:14

Источник

Теги:

javascript

vue.js

css

1 ответ

Ещё вопросы

AWolf · Answer 1 · 2017-10-08T05-23-00.000Z

Думаю, я нашел способ решить проблемы. (Исправление проблемы с обработкой страницы с позиции разрыва страницы немного взломанно, но работает.)

Позвольте мне объяснить, что я сделал:

Я добавил класс full_width в левую панель, если экран меньше 768 пикселей, чтобы увеличить width: 100% !important панели width: 100% !important с этим кодом Vue :class="{full_width: !largeScreen}"
Ручка отсутствовала, если я устанавливаю позицию разрыва страницы на 768 пикселей. Я уменьшил позицию на 17px (выглядит как padding 15px + 2px с границы, но я не мог изменить это с помощью css), тогда он работает. Поэтому внутри вычисленного свойства largeScreen я возвращаю его так: return this.screenWidth > (768 - 17); (Я проверил это, используя консоль, регистрирующую размер экрана.)

Пожалуйста, взгляните на эту скрипку.

У меня есть объяснение проблемы с ручкой и почему она работает, если я меняю позицию на 17 пикселей - сообщите мне.

Решение в порядке и, похоже, работает на меня. Возможно, я регистрирую проблему в Vue-multipane repo. для запроса функции, потому что это, вероятно, проще, если он был добавлен в компонент Multipane, и было бы неплохо, если бы перерыв точки останова с использованием свойства работал.