Как закрасить дробные части такого индикатора?

Для закрашивания дробных частей индикатора в Vue.js, вам потребуется использовать CSS и контролировать стили элементов в зависимости от значений дробной части.

1. Создайте компонент индикатора. Компонент будет иметь свойство value, которое будет хранить значение индикатора. Предположим, что value может быть числом с плавающей запятой от 0 до 1.

<template>
  <div class="indicator">
    <div class="whole-part"></div>
    <div class="fractional-part" :style="{ width: fractionalPartWidth }"></div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  computed: {
    fractionalPartWidth() {
      return `${this.value * 100}%`;
    }
  }
}
</script>

<style scoped>
.indicator {
  width: 200px;
  height: 20px;
  border: 1px solid #000;
}

.whole-part {
  height: 100%;
  background-color: green;
}

.fractional-part {
  height: 100%;
  background-color: red;
}
</style>

2. В компоненте мы создали два блока: .whole-part и .fractional-part. Первый блок представляет целую часть индикатора, а второй блок - дробную. Чтобы закрасить дробную часть, мы используем вычисляемое свойство fractionalPartWidth, которое вычисляет ширину блока дробной части, основываясь на значении value. Обратите внимание, что мы устанавливаем ширину блока в процентах, умножая значение value на 100.

3. Далее, добавьте индикатор в вашу родительскую компоненту и передайте ему значение индикатора. Например, если у вас есть переменная indicatorValue со значением индикатора:

<template>
  <div>
    <indicator :value="indicatorValue"></indicator>
  </div>
</template>
    
<script>
import Indicator from './Indicator';

export default {
  components: {
    Indicator
  },
  data() {
    return {
      indicatorValue: 0.75
    }
  }
}
</script>

4. Теперь, при изменении значения indicatorValue, дробная часть индикатора будет автоматически изменяться, и соответствующий блок будет закрашен пропорционально значению indicatorValue.

Таким образом, с помощью Vue.js и CSS вы можете легко закрасить дробные части индикатора, делая его более интерактивным и наглядным для пользователя.