写一个电量组件
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
效果图