信号格_系统

 

<script setup lang="ts">
const props = withDefaults(defineProps<{
  num?: number // 当前信号强度
  max?: number // 信号柱最大数量
  minHeight?: number // 信号柱最小高度，单位px
  width?: number // 信号柱宽度，单位px
  color?: string
  align?: string // 信号柱对齐方式 center, bottom, top
}>(), {
  num: 0,
  max: 3,
  minHeight: 3,
  width: 4,
  color: '#35E72E',
  align: 'bottom',
});

const activedIdx = computed(() => {
  return props.num > props.max ? props.max : props.num;
});
</script>

<template>
  <div
    class="signal-bar"
    :style="{
      alignItems: align === 'bottom' ? 'flex-end' : align === 'top' ? 'flex-start' : 'center',
    }"
  >
    <div
      v-for="(_, index) in max"
      :key="index"
      class="signal-bar-item"
      :style="{
        background: index + 1 <= activedIdx ? color : '',
        height: `${minHeight * (index + 1)}px`,
        width: `${width}px`,
      }"
    />
  </div>
</template>

<style lang="less" scoped>
.signal-bar {
  display: flex;
  &-item {
    //width: 4px;
    margin-right: 2px;
    background: #d7d7d7;
  }
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.