Сетка фиксированной ширины с полноэкранным элементом подэлементов между - PullRequest
Новая
       30

Сетка фиксированной ширины с полноэкранным элементом подэлементов между

0 голосов
/ 11 января 2020

У меня есть несколько пунктов, которые должны отображаться в сетке (3 подряд на рабочем столе, 2 подряд на планшете, 1 подряд на телефоне). Каждый элемент имеет подэлементы, которые должны отображаться, когда кто-то нажимает на элемент в сетке. Сложность заключается в том, что подэлементы всегда должны размещаться под строкой выбранного элемента. Кроме того, что элементы отображаются с фиксированной шириной (рабочий стол, например, 1400px и c), а подэлементы всегда находятся в полноэкранном режиме.

Вот как это должно выглядеть на рабочем столе

Я действительно не знаю, какое хорошее решение для этого может быть, мой код сейчас очень грязный и это все равно не работает для планшета или телефона - см. мою скрипку: 

new Vue({
  el: "#app",
  data: {
    items: [
    {
    	title: '1. Element',
    	subitems: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    {
	    title: '2. Element',
    	subitems: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    {
	    title: '3. Element',
    	subitems: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    {
	    title: '4. Element',
    	subitems: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    {
    	title: '5. Element',
    	subitems: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    {
    	title: '6. Element',
    	subitems: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    {
	    title: '7. Element',
    	subitems: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    {
	    title: '8. Element',
    	subitems: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    },
    {
	    title: '9. Element',
    	subitems: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
    ],
    curIndex:  null
  },
})
.items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.item {
  background: green;
  height: 120px;
  width: 120px;
  margin: 10px 5px;
}
.big-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  left: 0;
  height: 150px;
  width: 100%;
  background: red;
}
.subitem {
  height: 50px;
  width: 50px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="items">
  <template
    v-for="(item, index) in items"
  >
    <div
      :key="index"
      class="item"
      :v-click="curIndex === index ? curIndex = null : curIndex = index"
      v-text="item.title"
    >
    </div>
    <template
      v-if="(index === 2 || index === 5 || index === 8)"
    >
      <div
        v-for="(item, index) in items"
        :key="index"
        class="big-item"
      >
        <p v-text="item.title"></p>
        <div
          v-for="(subitem, subindex) in item.subitems"
          :key="subindex"
          class="subitem"
        >
        </div>
       </div>
    </template>
  </template>
</div>
...