您不容错过的两大Vue组件：自定义侧边栏和返回顶部

自定义侧边栏组件

侧边栏组件在移动端开发中非常常见，它可以为你的应用提供一个便捷的导航功能。使用Vue.js来创建侧边栏组件非常简单，只需要几行代码就可以完成。

首先，我们需要创建一个新的Vue组件文件，比如叫它Sidebar.vue。然后在其中添加如下代码：

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in items" :key="item.id">
        <a :href="item.link">{{ item.label }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #fff;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.sidebar a {
  text-decoration: none;
  color: #333;
}
</style>

这个组件非常简单，它就是一个带有列表的侧边栏。列表中的每一项都是一个链接，指向不同的页面。组件的props是items，它是一个数组，其中包含了列表项的数据。

现在，你可以在你的Vue.js项目中使用这个组件了。比如，在你的App.vue文件中，你可以这样使用它：

<template>
  <div id="app">
    <Sidebar :items="items" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Home', link: '/' },
        { id: 2, label: 'About', link: '/about' },
        { id: 3, label: 'Contact', link: '/contact' }
      ]
    }
  }
}
</script>

这样，你的应用中就有了侧边栏组件了。你可以通过修改items数组中的数据来改变侧边栏中的列表项。

返回顶部组件

返回顶部组件在移动端开发中也很常见，它可以帮助用户快速回到页面的顶部。使用Vue.js来创建返回顶部组件也很简单，只需要几行代码就可以完成。

首先，我们需要创建一个新的Vue组件文件，比如叫它BackToTop.vue。然后在其中添加如下代码：

<template>
  <button class="back-to-top" @click="scrollToTop">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><path d="M18 15l-6-6-6 6"></path></svg>
  </button>
</template>

<script>
export default {
  methods: {
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style>
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  margin: 10px;
  fill: #333;
}
</style>

这个组件也很简单，它就是一个带有箭头的按钮。点击这个按钮，就可以快速回到页面的顶部。

现在，你可以在你的Vue.js项目中使用这个组件了。比如，在你的App.vue文件中，你可以这样使用它：

<template>
  <div id="app">
    <BackToTop />
  </div>
</template>

这样，你的应用中就有了返回顶部组件了。你可以将它放在页面的任意位置，用户点击它就可以快速回到页面的顶部。