No.25 vue-element-admin 学习使用(二十)CountTo 计数,BackToTop 返回顶部

656 阅读1分钟

这是我参与8月更文挑战的第25天,活动详情查看:8月更文挑战

CountTo

CountTo是作者写的一个计数的组件,基于vue-count-to写的

image.png

看似没什么用,但是又不是完全没用,例如在一些活动页面,为了忽悠客户,显示访问量什么的,可能会用到,还是看一下吧。

官方demo有一些配置项,命名都很明确,开始值,结束值,时间,精度,分隔符,前缀,后缀 这些配置项,也就是count组件的属性

image.png

通过compute计算属性返回值,展示到页面上,给用户预览

image.png

image.png

然后写了一堆样式,vue-count-to组件的内部就先不看了。

BackToTop

返回顶部组件在@/components/BackToTop中 主要是back-to-top,接收一个用户自定义style,可见的高度,滑动到这个高度的时候才显示返回顶部按钮,返回到的位置,

<el-tooltip placement="top" content="tooltip">
      <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
    </el-tooltip>

自定义的style是下面这样的

image.png

组件内部接收到这些参数,有一个默认的style

image.png

mounted后就给页面添加了一个滚动监听器,来监听滚动的高度,beforeDestroy的时候销毁这个监听器,避免影响别的组件 image.png

最核心的方法是backToTop方法,用isMoving判断来避免连续点击,然后计算好对应的距离,滚动过去,setInterval的参数是滚动过去所用的时间,可以根据自己需要的,进行调整。

说真的下面这个方法我是拒绝读的,哈哈哈,只知道它是为了实现缓慢滑动过去的效果,等用到的时候直接抄吧。

image.png

image.png