Vue.js的页面滚动进度栏

Vue.js的页面滚动进度栏
插件名称 vue-scroll-progress-bar
发布时间 2020年5月25日
插件作者 guillaumebriday

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

安装和下载:

# Yarn
$ yarn add vue-scroll-progressbar

# NPM
$ npm install vue-scroll-progressbar --save

基本用法:

<template>
<vue-scroll-progress-bar @complete="handleComplete" height="2rem" />
</template>

Props

描述 默认
height 进度条的高度 '.5rem'
backgroundColor 进度条的背景属性 'linear-gradient(to right, #38C172, #51D88A)'
barClass 进度条的类属性 '{}'
containerColor 进度栏容器的背景属性 'transparent'
zIndex 进度栏容器的z-index属性 '50'
containerClass 进度条容器的类属性 '{"progress-bar-container--container": true}'

事件

描述
begin 滚动达到0%时
complete 当滚动达到100%