Vue.js阅读进度条 - vue-read-progress

Vue.js阅读进度条 - vue-read-progress
插件名称 vue-read-progress
发布时间 2020年5月22日
插件作者 ajerez

一个Vue.js组件,用于在页面顶部创建可自定义的进度条,以显示当前滚动进度。

安装和下载:

# Yarn
$ yarn add vue-read-progress

# NPM
$ npm install vue-read-progress --save

使用:

默认样式

<template>
  <vue-read-progress></vue-read-progress>
  <!-- 你的分页内容 -->
</template>

<script>
  import VueReadProgress from "vue-read-progress";
  export default {
    components: {
      VueReadProgress
    }
  };
</script>

自定义外观

<template>
  <vue-read-progress color="#32AAEA" opacity="0.5" height="10px" :shadow="true"></vue-read-progress>
  <!-- 你的分页内容 -->
</template>

<script>
  import VueReadProgress from "vue-read-progress";

  export default {
    components: {
      VueReadProgress
    }
  };
</script>

Gridsome(SSR)(https://gridsome.org/)

<template>
  <ClientOnly>
    <read-progress></read-progress>
  </ClientOnly>
  <!-- 你的分页内容 -->
</template>

<script>
  export default {
    components: {
      ReadProgress: () =>
        import ('vue-read-progress')
        .then(m => m.default)
        .catch()
    }
  };
</script>

选项

属笥 类型 默认值 Prop 描述
height String 4px 进度条的高度 (可选)
color String #506888 进度条的颜色 (可选)
opacity [String, Number] 1 将不透明度值设置为0到1 (可选)
shadow Boolean false 为进度栏启用阴影框 (可选)