vue2使用css绘制信号值

资源下载

<!--
 * @Description:信号强度
 * @Author:DEMON3443002624@QQ.COM
 * @Date:2022-1-19 09:45:29
 * @LastEditors:DEMON3443002624@QQ.COM
 * @LastEditTime:2022-1-20 09:11:42
-->
<template>
  <div
    class="signal-strength"
    :style="{ transform: 'scale(' + _scaleX + ',' + _scaleY + ')' }"
  >
    <ul>
      <li
        v-for="i in 6"
        :key="i"
        :style="{
          background:
            '' + (i <= strength ? '#5cf548' : 'rgba(0, 0, 0, 0.4)') + ''
        }"
      ></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: `SignalStrength`,
  props: {
    // 尺寸
    width: {
      type: Number,
      default: 60
    },
    height: {
      type: Number,
      default: 40
    },
    // 信号强度，默认满格信号
    strength: {
      type: Number,
      default: 6,
      validator: function (value) {
        // 必须为不大于6的整数
        if (value > 6 || value < 0) {
          console.error(`ERROR in 'SignalStrength.vue':you must provide a number <=6 and >=0!`)
          return false
        } else {
          return true
        }
      }
    }
  },
  computed: {
    _scaleX () {
      return this.width / 60
    },
    _scaleY () {
      return this.height / 40
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.signal-strength {
  width: 60px;
  height: 40px;
}
ul {
  position: relative;
  width: 100%;
  height: 100%;
}
li {
  width: 5px;
  position: absolute;
  bottom: 0;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
}
ul li:nth-child(1) {
  height: 10px;
  left: 0px;
}
ul li:nth-child(2) {
  height: 15px;
  left: 10px;
}
ul li:nth-child(3) {
  height: 20px;
  left: 20px;
}
ul li:nth-child(4) {
  height: 25px;
  left: 30px;
}
ul li:nth-child(5) {
  height: 30px;
  left: 40px;
}
ul li:nth-child(6) {
  height: 35px;
  left: 50px;
}
</style>