Vue3从0到1组件开发-基础组件：BackTop回顶

基础组件最后一件：Backtop

回到顶部的野望

谈及前端开发中的基础交互，必不可少的一个功能应该就是回到顶部了吧，

但是Backtop回到顶部功能应该也是网页中最不起眼的一个功能了，这句话没争议吧。

在我为数不多的开发经验当中，看过好几款不同的回到顶部，如瞬间回到顶部，滚动回顶顶部，定时回到顶部这几种算是比较常见的了，其中尤以瞬回,滚回这两种方式最为常见，而定时回顶则相对少一些，实现略微有点复杂，收益也不大，也就是传说中的付出大于回报。

当然这些都是看个人意愿，而在常规的Web项目开发中，回到顶部大概是必不可少的啦，尤其是长页面的项目中。

基础组件这一块也就以这个组件来作为结尾，之后开始下一个分类的组件分享。

画虎先画骨。

这里还是先从结构讲起，回到顶部的结构比较简单，常规布局就可以，主要是通过一个值控制好它的显示隐藏就可以了。

<template lang="pug">
block content
div(
  class="yx-backTop"
  :style="{right: `${right}px`, bottom: `${bottom}px`}"
  @click="toTop"
  v-show="backTop" // 控制是否显示，这里切忌用v-if，属于一个小小小的优化。
)
  slot
    div.yx-backTop-content
      <yx-icons type="backTop" />
</template>

结构比较简单，如果传值就显示传入样式，否则显示一个单纯的图标，默认样式也可以自定义一个啦。

逻辑部分

通过结构部分，就可以很清晰看到接受的传值了，那么这里只讲一下核心的内容，即定时回到顶部的方法。

这个方法并非我自己写的，本来只是想用常规的滚动回顶的，但是思来想去，那样的话这个组件就没什么好些的了。所以经过我多方查阅，来回闹腾，终于在其他的组件库找到了类似的方法，所以这里只是简单的进行一波分析。

代码如下

onMounted(() => {
   
  window.addEventListener('scroll', handleScroll, false)
  window.addEventListener('resize', handleScroll, false)
})

onBeforeUnmount