写一个电量组件

battery.vue

<template>
    <div>
      <canvas ref="mycanvas" :width="cWidth" :height="cHeight"></canvas>
    </div>
</template>

<script>
export default {
  name: 'battery',
  mycanvas: null,
  ctx: null,
  myInterval: null,
  props: {
    proQuantity: {
      type: Number,
      default: 50
    },
    proIsCharge: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      cWidth: 66,
      cHeight: 28,
      jd: 0
    }
  },
  created () {
  },
  watch: {
    // 监听是否变化电量 ，如果是 做一个充电动画
    proIsCharge (newVal, oldVal) {
      console.log('======proIsCharge============', newVal)
      let _this = this
      clearInterval(_this.myInterval)
      this.jd = 0
      if (_this.proIsCharge) {
        _this.myInterval = setInterval(function () {
          _this.drawCharge()
        }, 300)
      }
    }
  },
  mounted () {
    this.mycanvas = this.$refs.mycanvas
    this.ctx = this.mycanvas.getContext('2d')
    this.drawBg()
    this.drawPath(this.proQuantity)
  },
  methods: {
    // 画一个背景
    drawBg () {
      this.ctx.strokeStyle = 'rgba(255,255,255,1)'
      this.ctx.lineWidth = 2
      this.ctx.strokeRect(0, 0, 60, 28)
      this.ctx.fillStyle = 'rgba(0,0,0,0.2)'
      this.ctx.fillRect(0, 0, 60, 28)
      this.ctx.fillStyle = 'rgba(255,255,255,1)'
      this.ctx.fillRect(61, 7, 6, 14)
    },
    // 根据电量画出一个块
    drawPath (quantity) {
      if (this.proIsCharge) {
        this.ctx.fillStyle = 'green'
      } else if (quantity < 20) {
        this.ctx.fillStyle = 'red'
      } else {
        this.ctx.fillStyle = 'green'
      }
      this.ctx.fillRect(1, 1, (60 - 2) * quantity / 100, 26)
    },
    drawCharge () {
      this.ctx.clearRect(0, 0, this.cWidth, this.cHeight)
      this.drawBg()
      this.jd = this.jd + 10
      if (this.jd > 100) {
        this.jd = 0
      }
      this.drawPath(this.jd)
    }
  }
}
</script>

<style scoped>

</style>

主页面引用
比较简单

<battery style=" width: 90px;height: 30px;" :proIsCharge="IsCharge" :proQuantity="batteryEnegy"></battery>

更改batteryEnegy显示电量值 充电时更改IsCharge为true

效果图