Как сделать поочередное заполнение блоков?

Question

[Niksak]

Есть оружие, у него есть свойства. Есть значение свойства ( допустим, скорострельность ) и максимальное значение свойства ( value и maxValue ).
Каким образом можно сделать поочередное заполнение блоков индикатора как на скрине? Т.е. линия не сплошная а разделена на части.

<template>
  <div v-if="weapon" class="weapon-property">
    <div v-for="(property, index) in properties" :key="index" class="weapon-property__item">
      <span class="weapon-property__title">{{ property.title }}</span>
      <div class="line">
        <div v-for="chapter in 4" :key="chapter" class="line-chapter">
          <div class="chapter-progress" :style="{}"></div>
        </div>
      </div>
      <p class="weapon-property__value">{{ property.value }}</p>
    </div>
  </div>
</template>

Выше разметка, там же и структура этого индикатора ( т.е. блок 'line-chapter' должен заполняться, увеличивая ширину 'chapter-width', когда ширина дойдет до 100% у первого блока, начинается также у второго блока, всего их 4 )

Comments

[0xD34F]

было

[szQocks]

0xD34F, там если не ошибаюсь в вашем решении индикаторы полностью закрашиваются, а не на половину ( точнее не по процентам )

[szQocks]

0xD34F, а не, туплю демо не посмотрел

[Niksak]

0xD34F, и по твоему коду у меня небольшие вопросы)
https://play.vuejs.org/#eNp9VMFu2zAM/RXCWNF2qJN0XS...
Я немного изменил под свои нужды ( т.е. мне нужно чтобы кружка было 4 но уже значения были от 1 до 50 допустим, что я и указал в max ). Но кружки начинают заполняться одновременно, вот какие у меня обычно проблемы с такими индикаторами

Answer 1

[Сергей delphinpro]

w = val * 100 / max; - ширина в процентах, если бы была одна линия.

Линий 4, то есть на каждую по 25%

ceil(w / 25) кол-во полностью закрашенных частей
(w % 25) * 100 / 25 - ширина в процентах частично закрашенной части

Итого, функция вычисления ширины полоски в каждой части может выглядеть как-то так:

/**
 *  chapter - номер полоски, от 1 до 4
 *  val - текущее значение
 *  max - максимальное значение
 * Возвращает ширину полоски в процентах
 */
getWidth(chapter, val, max) {
  const CHAPTERS = 4;
  const p = 100 / CHAPTERS;
  let full = Math.ceil(w / p);
  let w = val * 100 / max;
  if (chapter <= full) return 100;
  if (chapter === full + 1) return (w % p) * 100 / p;
  return 0;
}

<div class="chapter-progress"
    :style="{width: getWidth(chapter, property.value, property.maxValue)+'%'}"
></div>

Comments

[Niksak]

Но считает оно что-то не очень. Т.е. вот скрин - урон, допустим, 40. Максимальный урон может быть 100.
Получается что полоска слишком далеко зашла а должна быть как на скрине

[Niksak]

Ну если макс. урон может быть 100 а указано что 40 то тут явно не 40%)

[Сергей delphinpro]

Niksak, блин. ну очевидно же, что у вас номера частей начинаются с нуля. Я в описании функции четко написал - с единицы. Поправьте сами.
Я сначала написал алгоритм подсчета, только потом допер что v-for="chapter in 4"выдаст числа 0..3, а не 1..4

[Niksak]

Сергей delphinpro, аа даже так емае, спасибо