每天学习一个vue插件(20)——progressbar

七秒记忆的鱼
575 阅读2分钟

男人有时候不拼命是不行的

前言

1 介绍

构造方法

Line/Circle/SemiCircle/Square

// 内部封装图形
// 线条, 顶部进度条
new ProgressBar.Line('#container', options)

// 圆, 圆形进度条
new ProgressBar.Circle(document.getElementById('container'), options)

// 半圆
new ProgressBar.SemiCircle(this.refs.container, options)

// 正方形
new ProgressBar.Square(this.refs.container, options)

Path

// 自定义图形
<svg>
  <path id="path" d="M100 100 L300 100"/>
</svg>

new ProgressBar.Path('#path', options)

常用选项 options

{
  // svg
  fill: 'rgba(0, 0, 0, 0.5)', // 填充颜色
  trailColor: '#eee', // 线条底色
  color: '#555', // 线条颜色
  strokeWidth: 10, // 线宽


  // text
  text: {
  value: '0', //默认值
  style: { // 样式
    position: 'absolute',
    left: '50%',
    top: '50%',
    padding: 0,
    margin: 0,
    fontSize: '2rem',
    color: '#f00'
  },

  // animation attrs
  duration: 2500,
  easing: 'easeInOut',

  // animation params
  from: { color: '#eee', width: 1 }, // 变化量初始值
  to: { color: '#000', width: 10 },  // 变化量结束值

  // callback
  step: function(state, circle) { // 回调函数
    // 变化量变化值 progress
    const { color, width } = state

    // 进度百分比
    const value = Math.round(circle.value() * 100)

    // 实时赋值
    circle.setText(value + '%')
    circle.path.setAttribute('stroke', color)
    circle.path.setAttribute('stroke-width', width)
  }
}

常用属性 attr

path

// 路径
circle.path

text

// 文本
circle.path

常用方法 methods

animate

// 开始动画 0-1
circle.animate(1)

set

// 设置初始进度 0-1
circle.set(progress)

setText

// 给文本赋值
circle.setText(text)

setAttribute

// 更改颜色
// 更改线宽
circle.path.setAttribute('stroke', color)
circle.path.setAttribute('stroke-width', width)

2 使用

安装

npm i progressbar.js --save

引入

import ProgressBar from 'progressbar.js'

进度条

<template>
  <div class="BaseSvg">
    <div id="container"></div>
    <div id="progress"></div>
    <div id="custom"></div>

    <!-- 自定义路径 -->
    <svg
      width="100%"
      height="200"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        id="path"
        d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z"
        fill="#ccc"
        stroke="red"
        stroke-width="3"
        stroke-linecap="round"
        transform="translate(130, 50) scale(1.5)"
      />
    </svg>
  </div>
</template>

<script>
import ProgressBar from 'progressbar.js'
export default {
  mounted() {
    console.log('ProgressBar', ProgressBar)
    this.drawLine()
    this.drawCircle()
    this.drawPath()
  },
  methods: {
    // Line Circle SemiCircle Square
    drawLine() {
      const line = new ProgressBar.Line('#container', {
        color: '#409EFF'
        // strokeLinecap: 'round'
        // strokeDasharray: '20, 4'
      })
      console.log('line', line)

      line.animate(1)
    },
    drawCircle() {
      const circle = new ProgressBar.Circle('#progress', {
        color: '#555',
        trailColor: '#eee',
        strokeWidth: 10,
        duration: 2500,
        easing: 'easeInOut',
        // fill: 'rgba(0, 0, 0, 0.5)',
        text: {
          // Default: null
          value: '100',

          // Default: 'progressbar-text'
          className: 'progressbar__label',

          // Default: object speficied below
          style: {
            // Default: same as stroke color (options.color)
            color: '#f00',
            position: 'absolute',
            left: '50%',
            top: '50%',
            padding: 0,
            margin: 0,
            fontSize: '2rem',
            // You can specify styles which will be browser prefixed
            transform: {
              prefix: true,
              value: 'translate(-50%, -50%)'
            }
          },

          // Only effective if the text.style is not null
          // By default position: relative is applied to container if text
          // is set. Setting this to false disables that feature.
          autoStyleContainer: true,

          // Default: true
          alignToBottom: true
        },

        from: { color: '#eee', width: 1 },
        to: { color: '#000', width: 10 },
        step: function(state, circle, attachment) {
          // console.log('step:state', state)
          // console.log('step:circle', circle)
          // console.log('step:attachment', attachment)
          const { color, width } = state
          const value = Math.round(circle.value() * 100)

          circle.setText(value + '%')
          circle.path.setAttribute('stroke', color)
          circle.path.setAttribute('stroke-width', width)
        }
      })

      // 初始化进度
      circle.set(0.05)

      setTimeout(function() {
        circle.animate(0.3)
      }, 1000)

      setTimeout(function() {
        circle.animate(0.4)
      }, 3500)

      setTimeout(function() {
        circle.animate(0.8)
      }, 5500)

      setTimeout(function() {
        circle.animate(1)
      }, 8000)
    },
    drawPath() {
      const custom = new ProgressBar.Path('#path')
      custom.animate(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.BaseSvg {
  & > div {
    margin-top: 40px;
  }
}
</style>

3.注意

1.执行animate方法后，方可开始动画
2.自定义路径，须使用Path方法，且传入标签为path的DOM元素

尾声

夜风有些凉呢，乖乖盖好被子，可别感冒了哦~

晚安 ^_^

参考链接

往期回顾

avatar
文章
阅读
粉丝