Vue--利用ant-design-vue Progress实现

有时候在阅读某些博客文章的时候，页面顶部会显示阅读的实时进度。
大概效果就是：

我在做的大致思路就是：新建一个组件，引入ant-design-vue的Progress组件，然后父组件会穿给子组件一个滚轮滚动距离以及滚轮可滚动距离，二者的比就是进度条实时进度。

剩下的工作就是计算这两个距离了：

首先计算totalHeight:

const articleadd: any = this.$refs.article_add;
  this.totalHeight =
        articleadd.offsetHeight - document.documentElement.clientHeight + 64;

articleadd.offsetHeight 是滚轮滚动的dom高度
document.documentElement.clientHeight:是屏幕高度
64：是因为滚动区域上方有个固定高度的头，我们要把它去掉
这样计算出来的就是滚轮可滚动高度了。

然后我们在mounted中给滚动的dom绑定滚动监听事件。注意：一定要在mounted中。

 articleadd.parentNode.addEventListener(
        "scroll",
        () => {
          var scrollTop = articleadd.parentNode.scrollTop;
          this.currentHeight = scrollTop;
        },
        true
      );

我们在引入组件的时候传入参数即可