Создание функции SASS для расчета ширины на основе vuejs prop

Заранее спасибо за помощь.

Я пытаюсь создать функцию в sass, которая принимает 2 значения опоры, вычисляет процент и возвращает процент как значение ширины. Я использую индикатор выполнения начальной загрузки.

Класс должен быть динамическим, поэтому, если результат равен 32, полоса должна быть 32%.

Вот контейнер, который управляет шириной индикатора выполнения

<div
  class="progress-bar bg-success"
  :class="'width-' + value"
  role="progressbar"
  :aria-valuenow="value"
  aria-valuemin="0"
  aria-valuemax="100"
></div>


<script>
export default {
  name: "Bar",
  props: {
    bar: String,
    value: Number,
    totalValue: Number
  }

};
</script>

<style lang="scss" scoped>
@function bar-width() {
  @return width(value/totalValue * 100);
}
</style>

Это то, что у меня есть до сих пор, я чувствую, что я на правильном пути, любая помощь будет принята с благодарностью.

Благодарю вас!


vue.js sass vue-props
person Jasmine Ibikunle    schedule 28.06.2021    source источник
comment
Извините, что разочаровал вас, но вы на совершенно неправильном пути. Функции SASS выполняются только во время сборки (SASS компилируется в чистый CSS), поэтому вы не можете использовать их во время выполнения (когда ваше приложение Vue работает внутри браузера пользователя).   -  person Michal Levý    schedule 28.06.2021

Ответы (1)


arrow_upward
0
arrow_downward

Как правильно заметил @MichalLevý в комментариях, невозможно делать то, что вы хотите. SCSS генерируется во время компиляции, а Vue выполняется во время выполнения. Таким образом, все комбинации должны быть уже определены во время компиляции.

В любом случае у вас есть два варианта решения вашей проблемы: либо вы создаете все возможные классы с помощью SCSS (то есть 100 классов, если у вас есть только целочисленные процентные значения), что кажется ненужным объемом кода для доставки каждому клиенту. Или вы просто используете атрибут динамического стиля и привязываете процентное значение к этому атрибуту с помощью обычного Vue.

Я бы предпочел второй подход, потому что он чище. Однако есть оговорка, что в этом случае вы не можете использовать CSP без добавления unsafe-inline к части стиля. Однако по-прежнему существует возможность затем установить свойство стиля с помощью JavaScript (без использования атрибута стиля) при изменении значения (наблюдатель Vue).

Вот второе решение в его простейшей форме:

<div :style="{ width: `${percent}%` }" />
person ssc-hrep3    schedule 28.06.2021