信号格

 

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