vue电池小图标_vue电量显示-优快云博客

本文链接：https://blog.youkuaiyun.com/V_AYA_V/article/details/130884694

该代码示例展示了一个Vue组件，用于根据输入的电池容量显示不同颜色的电池小图标。组件通过计算将电量分为6个等级，并分别用不同颜色表示。颜色从红色(#FE5F69)到黄色(#FFC95C)，再到绿色(#64BA8C)，随着电量增加而变淡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的电池小图标，根据电量展示不同的颜色。

在这里插入图片描述

<template>
  <div class="battery-container">
    <div class="shell">
      <div 
        v-for="(item,index) in batteryChunk" 
        class="block" 
        :key="index"
        :style="{
          background: `${batteryColor}`
        }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    capacity:{
      type: [Number,String],
    }
  },
  computed:{
    batteryChunk(){
      return this.findInterval(this.capacity)
    },
    batteryColor(){
      if(this.batteryChunk >=0 && this.batteryChunk <= 1){
        return '#FE5F69'
      }else if(this.batteryChunk > 1 && this.batteryChunk <=4){
        return '#FFC95C'
      }else{
        return '#64BA8C'
      }
    }
  },
  methods:{
    findInterval(num) {
      var intervalSize = 100 / 6
      var interval = Math.floor(num / intervalSize)
      if (interval === 6) { 
        return interval
      } else {
        return interval + 1
      }
    }
  }
}
</script>
<style lang='less' scoped>
.battery-container{
  width: 48px;
  height: 24px;
  border: 4px solid #DFE6EE ;
  border-radius: 4px;
  position: relative;
  transform: scale(0.5);
  transform-origin: left top;
  &:after{
    content: "";
    display: block;
    height: 12px;
    width: 4px;
    position: absolute;
    background:#DFE6EE ;
    right: -8px;
    top: 0;
    bottom: 0;
    margin: auto 0;
  }
  .shell{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2px;
    background: #F8FAFC ;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-column-gap: 2px;
    .block{
      width: 100%;
      height: 100%;
    }
  }
}
</style>