用于页面滚动进度条的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% |