vue 全屏页面滚动插件_用于页面滚动进度条的简单Vue.js插件

vue 全屏页面滚动插件

Vue滚动进展 (vue-scroll-progress)

Simple Vue.js plugin for page scroll progress bar.

用于页面滚动进度条的简单Vue.js插件。

View Demo 查看演示 Download Source 下载源

安装 (Installation)

npm i vue-scroll-progress --save

yarn add vue-scroll-progress

CDN (CDNs)

jsDelivr, UNPKG, bundle.run

jsDelivr ， UNPKG ， bundle.run

用法 (Usage)

main.js (main.js)

// YourComponent.vue or main.js for global usage
import Vue from 'vue'
import VueScrollProgress from 'vue-scroll-progress'

Vue.use(VueScrollProgress)

在组件中使用 (Use in component)

<!-- .vue template -->
<template>
  <VueScrollProgress></VueScrollProgress>
</template>

设置进度栏样式，并根据需要进行自定义(可选) (Set progress bar style, and customize as you want(Optional))

<style>
/* play with some lines below */
#progress-container-el {
  /* background */
  background-color: #f4f4f4 !important;
}

#progress-el {
  /* progress bar */
  background-color: red !important;
}
</style>

翻译自: https://vuejsexamples.com/simple-vue-js-plugin-for-page-scroll-progress-bar/

vue 全屏页面滚动插件