这是我参与8月更文挑战的第25天,活动详情查看:8月更文挑战
CountTo
CountTo是作者写的一个计数的组件,基于vue-count-to写的
看似没什么用,但是又不是完全没用,例如在一些活动页面,为了忽悠客户,显示访问量什么的,可能会用到,还是看一下吧。
官方demo有一些配置项,命名都很明确,开始值,结束值,时间,精度,分隔符,前缀,后缀 这些配置项,也就是count组件的属性
通过compute计算属性返回值,展示到页面上,给用户预览
然后写了一堆样式,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是下面这样的
组件内部接收到这些参数,有一个默认的style
mounted后就给页面添加了一个滚动监听器,来监听滚动的高度,beforeDestroy的时候销毁这个监听器,避免影响别的组件
最核心的方法是backToTop方法,用isMoving判断来避免连续点击,然后计算好对应的距离,滚动过去,setInterval的参数是滚动过去所用的时间,可以根据自己需要的,进行调整。
说真的下面这个方法我是拒绝读的,哈哈哈,只知道它是为了实现缓慢滑动过去的效果,等用到的时候直接抄吧。