VueJS左侧菜单列表可更新主要内容面板

Question

我有一个VueJS应用程序，需要创建一个具有左侧菜单和主要内容的组件，如下图所示：

加载视图后，将在create method上加载left menu json和items content json。到那时，将不会在主要内容中呈现任何项目。

一旦用户从左侧菜单中选择了一个项目，则将过滤项目内容的json，以便主组件呈现正方形（每个项目组件实际上是独立的组件）。

我的问题是我应该构建多少个组件？

我想我将不得不创建一个包含left menu component和right component的组件容器。然后right组件将具有标题和一个v-for元素，这些元素将呈现每个item component。那是路要走吗？

  

有什么建议吗？

Answer 1

您可以使用CSS grid创建一个布局所有三个区域的容器组件。然后，您可以为每个区域提供一个组件：左菜单，标题内容和主要内容。

网格布局有一些学习曲线，但是非常有用。现代浏览器support it，而不是IE。

new Vue({
  el: '#app',
  components: {
    leftMenu: {
      template: '#left-menu-template'
    },
    mainContent: {
      template: '#main-content-template'
    },
    headerThing: {
      template: '<div class="header-thing"><div>one</div><div>two</div></div>'
    }
  }

});

html,
body {
  height: 100%;
}

#app {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'lm h'
    'lm mc'
  ;
  width: 100%;
  height: 100%;
}

.header-thing {
  background-color: #eef;
  grid-area: h;
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  padding: 0.7em;
  grid-gap: 1.4em;
}

.left-menu {
  background-color: #efe;
  grid-area: lm;
  padding: 0.7em;
}

.main-content {
  background-color: #fee;
  grid-area: mc;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
  grid-auto-rows: 1fr;
}

.content-item {
  background-color: white;
  border: thin solid black;
  border-radius: 0.2em;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 2em 3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <header-thing></header-thing>
  <left-menu></left-menu>
  <main-content></main-content>
</div>

<template id="left-menu-template">
  <nav class="left-menu">
    <div>First item</div>
    <div>Second item</div>
  </nav>
</template>

<template id="main-content-template">
  <div class="main-content">
    <div class="content-item">item</div>
    <div class="content-item">another</div>
    <div class="content-item">another</div>
    <div class="content-item">more</div>
    <div class="content-item">still more</div>
    <div class="content-item">another</div>
  </div>
</template>