代码之家 › 专栏 › 技术社区 › VAAA

更新主内容面板的VueJS左菜单列表

vuejs2 vue.js

0

VAAA · 技术社区 · 7 年前

VueJS 应用程序,其中我需要创建一个组件,该组件将具有左侧菜单和主内容,如下图所示:

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

用户从左侧菜单中选择一个项目后 json 对于项目内容,将进行过滤,以便主组件渲染正方形(每个项目组件实际上是单独的组件)。

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

我想我必须创建一个组件容器来保存 left menu component 和 right component . 然后右组件将具有标题和 v-for 元素,该元素将渲染 item component . 这是路吗?

有什么建议吗?

0 回复 | 直到 7 年前

1

Roy J 7 年前

可以创建一个容器组件,使用 CSS grid . 然后,您可以为每个区域设置一个组件:左菜单、标题和主要内容。

网格布局有一点学习曲线,但它是有用。现代浏览器 support it

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>