Vue3基础组件开发：打造实用的BackTop回顶组件

2023-10-16 12:36:00

在日常Web开发中，当网页内容过多或很长时，用户需要频繁滚动页面以浏览全部内容。为了提升用户体验，"回到顶部"组件应运而生，它允许用户一键返回网页顶部，避免繁琐的滚动操作。本文将从零开始指导您使用Vue3开发一个功能强大的BackTop回顶组件。

开发步骤：

1. 创建Vue组件：

// BackTop.vue
<template>
  <button class="back-top" @click="backToTop">
    <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M8 14a6 6 0 0 0 6-6V2a6 6 0 0 0-6-6H2a6 6 0 0 0-6 6v6a6 6 0 0 0 6 6h6zm0-12a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4H2a4 4 0 0 1-4-4V2a4 4 0 0 1 4-4h6z"/>
    </svg>
  </button>
</template>

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

<style scoped>
.back-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f2f2f2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 999;
}

.back-top:hover {
  opacity: 1;
}
</style>

2. 检测滚动位置：
为了在合适的位置显示回顶按钮，我们需要检测滚动位置。我们使用Vue3的mounted钩子函数在组件挂载时为window对象添加滚动事件监听器。当滚动距离大于设定的阈值时，回顶按钮将逐渐显示；否则，将隐藏。

<script>
// ... 省略前面的代码 ...

export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      if (document.documentElement.scrollTop > 100) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    // ... 省略后面的代码 ...
  }
}
</script>

3. 样式调整：
根据实际需要，您可以自定义回顶按钮的外观和位置。您可以调整按钮的背景颜色、形状、大小和边框等属性。

4. 优化：
为了提高性能，我们可以使用节流函数来减少对window的滚动事件监听。我们可以使用lodash库的debounce函数，该函数在给定的时间间隔内只调用一次回调函数。

<script>
import { debounce } from 'lodash';

// ... 省略前面的代码 ...

export default {
  mounted() {
    this.handleScroll = debounce(this.handleScroll, 100);
    window.addEventListener('scroll', this.handleScroll);
  },
  // ... 省略后面的代码 ...
}
</script>

5. 集成到项目：
将BackTop.vue组件导入到您的Vue项目中，并在需要显示回顶按钮的位置使用该组件。

<template>
  <!-- 其他组件代码 -->

  <BackTop />
</template>

<script>
import BackTop from './components/BackTop.vue';

export default {
  components: {
    BackTop
  }
}
</script>