vue+less 电池电量图标组件

最新推荐文章于 2024-08-16 15:42:06 发布

金包银是喵桑

最新推荐文章于 2024-08-16 15:42:06 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js less javascript

本文链接：https://blog.youkuaiyun.com/weixin_42674490/article/details/126739608

vue 专栏收录该内容

22 篇文章

订阅专栏

父组件调用

 <battery-icon :quantity=40  style="width:70px;"></battery-icon>

组件代码

<template>
  <div class="electric-panel" :class="bgClass">
    <div class="panel" :style="{transform: `rotate(${rotate}deg)`}">
      <div class="remainder" :style="{width: quantity +'%'}" />
    </div>
    <div v-show="showText" :style="{marginLeft: (parseFloat(rotate)? 0 : '10') + 'px'}"
      class="text">{{ quantity }}%</div>
  </div>

</template>

<script>
/**
 * 电池电量Icon
 */
export default {
  props: {
  	// 电量值
    quantity: {
      type: Number,
      default: 0
    },
    // 是否显示电量值
    showText: {
      type: Boolean,
      default: true
    },
    // 旋转角度
    rotate: {
      type: String,
      default: '0'
    }
  },
  computed: {
    bgClass() {
      if (this.quantity >= 50) {
        return 'success'
      }
      //  else if (this.quantity >= 15) {
      //   return 'warning'
      // }
      //  else if (this.quantity >= 1) {
      //   return 'danger'
      // } 
      else {
        return 'danger'
      }
    }
  }
}
</script>

<style lang="less" scoped>
@color-success: #34A94D;
// @color-warning: orange;
@color-danger: #FA3220 ;
.panel(@color) {
  .panel {
    border-color: @color;
    &:before {
      background: @color;
    }
    .remainder {
      background: @color;
    }
  }
  .text {
    color: @color;
  }
}
.electric-panel {
  display: flex;
  justify-content: center;
  align-items: center;

  .panel {
    box-sizing: border-box;
    width: 30px;
    height: 14px;
    position: relative;
    border: 2px solid #ccc;
    padding: 1px;
    border-radius: 3px;

    &::before {
      content: '';
      border-radius: 0 1px 1px 0;
      height: 6px;
      background: #ccc;
      width: 4px;
      position: absolute;
      top: 50%;
      right: -4px;
      transform: translateY(-50%);
    }

    .remainder {
      border-radius: 1px;
      position: relative;
      height: 100%;
      width: 0%;
      left: 0;
      top: 0;
      background: #fff;
    }
  }

  .text {
    text-align: left;
    width: 42px;
  }

  &.success {
    .panel(@color-success);
  }

  // &.warning {
  //   .panel(@color-warning);
  // }

  &.danger {
    .panel(@color-danger);
  }
}
</style>