@Niksak

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

6560ad8ac504e719870147.png
Есть оружие, у него есть свойства. Есть значение свойства ( допустим, скорострельность ) и максимальное значение свойства ( 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 )
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro
frontend developer
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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы