Vue 侧边栏

Vue 侧边栏是一种常见的布局方式，通常用于在网页或应用程序中显示导航菜单或页面选项。通过使用 Vue.js，我们可以轻松地创建可定制的侧边栏组件。

创建侧边栏组件

要创建一个 Vue 侧边栏组件，我们可以使用 Vue 的组件系统。下面是一个示例：

<template>
  <div class="sidebar">
    <div class="menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
};
</script>

<style scoped>
.sidebar {
  display: flex;
  height: 100vh;
  background-color: #f7f7f7;
}

.menu {
  height: 100%;
  width: 200px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #e7e7e7;
  overflow-y: auto;
}

.content {
  flex: 1;
  padding: 20px;
}
</style>

在上面的示例中，我们创建了一个名为 Sidebar 的组件，它包含一个菜单和一个用于显示内容的插槽。菜单由一个无序列表和一些 CSS 样式组成，它的样式可以根据需要进行自定义。

使用侧边栏组件

要使用我们刚刚创建的侧边栏组件，我们只需将它添加到父组件的模板中，然后将需要显示的内容添加到插槽中：

<template>
  <div>
    <sidebar>
      <h1>My App</h1>
      <p>Welcome to my app!</p>
    </sidebar>
  </div>
</template>

<script>
import Sidebar from './Sidebar.vue';

export default {
  name: 'App',
  components: {
    Sidebar,
  },
};
</script>

在上面的示例中，我们创建了一个名为 App 的父组件，并将我们刚刚创建的 Sidebar 组件引入到其中。然后我们在侧边栏中添加了标题和一段欢迎文字。

自定义侧边栏组件

通过使用 Vue 的 Props，我们可以轻松地为我们的侧边栏组件添加自定义属性。下面是一个添加自定义颜色属性的示例：

<template>
  <div class="sidebar" :style="{ backgroundColor: backgroundColor }">
    <!-- 菜单和插槽内容 -->
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  props: {
    backgroundColor: {
      type: String,
      default: '#f7f7f7',
    },
  },
};
</script>

在上面的示例中，我们为我们的 Sidebar 组件添加了一个名为 backgroundColor 的自定义属性，并使用这个属性来设置侧边栏的背景色。如果父组件没有指定这个属性，我们默认使用 #f7f7f7 作为背景色。

结论

Vue 侧边栏是一种常用的布局方式，它在应用程序和网页中经常用于导航和页面选项。通过使用 Vue.js，我们可以轻松地创建可定制的侧边栏组件，并通过使用 Props 来添加自定义属性。