Question

<template>
  <div class="about">
    <Header />
    <h1>This is the dashboard page</h1>
  </div>
</template>

<script>
import Header from "../components/layout/Header.vue";

export default {
  name: "dashboard",
  components: { Header }
};
</script>

我已经导入了标题组件，并且想要基于用户所在的视图来更改菜单项的活动状态，我该如何实现？

header.vue中的片段

 <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-end">
            <a class="navbar-item">Dashboard</a>
            <a class="navbar-item">Building Overview</a>
            <a class="navbar-item">Map View</a>
            <a class="navbar-item">Log Out</a>
            <a class="navbar-item">Import</a>
            <a class="navbar-item">Export</a>
          </div>
        </div>

Answer 1

首先，我们将view绑定到您的仪表板文件中的Header，以便header可以接收当前视图。

<Header view="dashboard" />

然后，我们需要通过在props中设置<script>来让您的头文件知道要接收哪个属性。
您可以在view中检查<template>的值来设置类或添加样式。

<template>
  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-end">
      <a :class="view == 'dashboard' ? 'navbar-item--active' : 'navbar-item'">Dashboard</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: ['view']
};
</script>

如何在视图中设置组件的样式？

1 个答案: