z-progress-loading's Introduction

z-progress-loading

基于 canvas 实现的加载进度条 vue 组件。（现在支持基于 dom 实现的配置）

Features

可作为 loading 组件使用
可作为 pregress-bar 组件使用
可作为音乐播放进度条使用

Preview

对应 demo 代码在 examples 目录

How to use

npm install --save z-progress-loading

<template>
  <div #app>
    <ZProgressLoading :progress="progress" :start="start" :config="config" />
  </div>
</template>

<script>
import ZProgressLoading from 'z-progress-loading';
export default {
  components: {
    ZProgressLoading
  },
  // ...
}
</script>

Start

# 本地调试 localhost:3000
npm start # 或 npm run serve

# 编译 产物位于 dist 目录
npm run build

# 发布
npm run release

Params Config

progress: 传入进度，取值 0 - 100 之间；若不需要可始终传入 0 或 100。
start: 控制开始暂停。
config: 样式配置；elem 的概念是每一个小矩形；
- renderer: 渲染方式，默认为 "dom"，可选 "canvas"
- elemWidth: 单个小矩形宽度
- elemMinHeight: 小矩形最小高度
- elemMaxHeight: 小矩形最大高度；最小最大高度相同时，将不会跳动
- elemDeltaHeight: 初始时不同小矩形的高度差值
- spacing: 小矩形间距；间距为 0 时将连成不间断的进度条
- step: 小矩形跳动时高度变化的步长；默认为 1；值越大跳动时变化越快
- bgColor: 未达到进度的小矩形颜色
- foreColor: 已达到进度的小矩形颜色
- lineCap: 线条裁切方式，默认为直角 "square"，可选圆角 "round"