使用Vue实现简单的信号和电池电量组件

　　<template>
　　    <div class="signal-content">
　　        <div class="signal-bars">
　　            <div v-for="(n, index) in 5" :key="n" class="bar" :class="getBarClass(n)" :style="{ height: `${(index + 1) * 20}%` }"></div>
　　        </div>
　　        <span class="signal-type">{{ props.type == 1 ? '4G' : 'WIFI' }}</span>
　　    </div>
　　</template>
　　
　　<script setup>
　　import { computed } from 'vue';
　　
　　const props = defineProps({
   　　 signalStrength: {
      　　  type: Number,
        　　default: 0,
        　　validator: (value) => value >= 0 && value <= 5,
    　　},
   　　 type: {
      　　  type: [String, Number],
      　　  default: '1',
   　　 },
　　});

　　const getBarClass = computed(() => {
 　　   return (index) => {
    　　    // 如果当前索引小于或等于信号强度，则返回相应的颜色类
       　　 if (index <= props.signalStrength) {
           　　 if (props.signalStrength <= 1) {
            　　    return 'low';
           　　 } else if (props.signalStrength <= 3) {
           　　     return 'medium';
           　　 } else {
             　　   return 'high';
          　　  }
      　　  }
      　　  return 'empty';
   　　 };
　　});
　　</script>

　　<style scoped>
　　.signal-content {
　　    display: flex;
　　    align-items: center;
　　}
　　.signal-bars {
 　　   display: flex;
  　　  width: 20px;
   　　 height: 14px;
   　　 align-items: flex-end;
　　　　  margin-right: 3px;
　　}

　　.bar {
  　　  width: 2px; /* 单个信号条的宽度 */
  　　  margin-right: 2px; /* 信号条之间的间隔 */
  　　  transition: background-color 0.3s; /* 动画效果 */
　　}

　　.bar:last-child {
  　　  margin-right: 0; /* 最后一个信号条不需要右边距 */
　　}

　　.bar.low {
  　　  background-color: #ff4949; /* 低信号强度颜色 */
　　}

　　.bar.medium {
 　　   background-color: #ffba00; /* 中等信号强度颜色 */
　　}

　　.bar.high {
  　　  background-color: #13ce66; /* 高信号强度颜色 */
　　}

　　.bar.empty {
  　　  background-color: #ccc; /* 空信号条颜色 */
　　}
　　</style>

<SignalStrength :signalStrength="item.net_strenth" :type="item.net_type" />

<template>
 　　   <!-- 电池电量Icon组件 -->
  　　  <div class="electric-panel" :class="bgClass">
    　　    <div class="panel" :style="{ transform: `rotate(${rotate}deg)` }">
     　　       <div class="remainder" :style="{ width: batteryNum + '%' }" />
      　　  </div>
     　　   <div v-show="showText" :style="{ marginLeft: (parseFloat(rotate) ? 0 : '10') + 'px' }" class="text">
          　　  <!-- 充电中不显示电量百分比 -->
          　　  <template v-if="!proIsCharge">{{ batteryNum }}%</template>
           　　 <template v-else>充电中</template>
       　　 </div>
 　　   </div>
　　</template>

　　<script setup>

　　const props = defineProps({
 　　   // 电池显示的数值
  　　  quantity: {
  　　      type: Number,
   　　     default: 0,
  　　  },
   　　 // 是否显示电量百分比
   　　 showText: {
      　　  type: Boolean,
      　　  default: true,
　　    },
   　　 // 是否展示充电状态
   　　 proIsCharge: {
    　　    type: Boolean,
   　　     default: false,
  　　  },
  　　  // 旋转百分比
  　　  rotate: {
  　　      type: String,
    　　    default: '0',
   　　 },
　　});

　　const batteryNum = ref(props.quantity);
　　const bgClass = computed(() => {
　　    if (props.proIsCharge) return 'primary';
 　　   if (batteryNum.value >= 30) {
      　　  return 'success';
   　　 } else if (batteryNum.value >= 15) {
   　　     return 'warning';
  　　  } else if (batteryNum.value >= 5) {
  　　      return 'danger';
  　　  } else {
    　　    return 'danger';
   　　 }
　　});

　　let myInterval = null;

　　const handeRecharge = () => {
　　    clearInterval(myInterval);
 　　   batteryNum.value = 0;
  　　  if (props.proIsCharge) {
  　　      myInterval = setInterval(() => {
   　　         drawCharge();
   　　     }, 500);
  　　  }
　　};

　　const drawCharge = () => {
  　　  batteryNum.value += 20;
  　　  if (batteryNum.value > 100) {
  　　      batteryNum.value = 0;
  　　  }
　　};

　　onMounted(() => {
    　　if (props.proIsCharge) {
        　　handeRecharge();
   　　 }
　　});

　　onBeforeUnmount(() => {
   　　 if (myInterval) {
    　　    clearInterval(myInterval);
  　　  }
　　});
　　</script>

　　<style lang="scss" scoped>
　　// custom theme color
　　$color-primary: #447ced;$color-success: #13ce66;
　　$color-warning: #ffba00;$color-danger: #ff4949;
　　$color-info: #909399;$color-white: #fff;

　　@mixin panel-style($color) {
　　  .panel {
 　　   border-color: $color;
 　　   &::before {
  　　    background: $color;
   　　 }
    　　.remainder {
    　　  background: $color;
    　　}
  　　}
  　　.text {
  　　  color: $color;
  　　}
　　}

　　.electric-panel {
 　　 display: flex;
  　　justify-content: center;
 　　 align-items: center;
 　　 &.primary {
 　　   @include panel-style($color-primary);
 　　 }

 　　 &.success {
  　　  @include panel-style($color-success);
 　　 }
  
 　　 &.warning {
  　　  @include panel-style($color-warning);
  　　}
  
  　　&.danger {
  　　  @include panel-style($color-danger);
 　　 }
  
 　　 .panel {
    　　box-sizing: border-box;
   　　 width: 18px;
   　　 height: 10px;
   　　 position: relative;
   　　 border: 1px solid #ccc;
   　　 padding: 1px;
   　　 border-radius: 2px;
   　　 &::before {
    　　  content: "";
     　　 border-radius: 0 1px 1px 0;
      　　height: 4px;
      　　background: #ccc;
     　　 width: 2px;
 　　     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: auto;
　　    font-size: 13px;
　　  }
　　}

　　</style>

<quantity :quantity="JsonContent(item).bat_l" :proIsCharge="true" />