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" />

 

效果