VueJS - Обмен глобальной переменной из данных во внутренний файл s css (DYNAMI C CSS) - PullRequest
Новая
       9

VueJS - Обмен глобальной переменной из данных во внутренний файл s css (DYNAMI C CSS)

0 голосов
/ 27 января 2020

У меня есть главный компонент с именем App.vue, и в этом файле я вызываю ajax запрос к серверу, который возвращает JSON цветов.

Мой ajax вызов находится внутри vue хук жизненного цикла с именем created. Когда ajax будет выполнено, он заполнит локальную базу данных по результату.

В том же файле у меня есть стиль, написанный на S CSS. 

<style lang="scss">
$primary: #ff2000;
$secondary: #000111;
</style>

Is Есть ли возможность поделиться в этом S CSS файле блока тех JSON цветов из состояния компонентов? Пожалуйста, представьте себе прикрепленное ниже изображение.

enter image description here

** ИСПРАВЛЕНИЯ **

  1. this.colors = colors.data

  2. .color-Secondary {background: $ second; }

Цвета динамические c, поэтому он поступает из базы данных.

Заранее спасибо.

Ответы [ 3 ]

1 голос
/ 27 января 2020

Невозможно динамически обновлять значения переменных S CSS так, как вы хотите. Веб-браузеры не понимают S CSS, только CSS. S CSS компилируется в CSS раньше времени; переменные компилируются.

В последнее время CSS переменные стали чем-то особенным, так что, возможно, это может быть то, что вы можете рассмотреть.

Другое кроме того, вы обычно не делаете динамические c обновления таблиц стилей. Возможно, вам нужно какое-то решение CSS -in- JS.

0 голосов
/ 29 января 2020

Я думаю, что прибил это !! Но я не совсем уверен, рекомендуется ли это или нет. Я даже не знаю, с какой стороны делать эту настройку. Но это сработало! :) 

created() {
  // assume that this colors are coming from an async ajax call
  let colors = {
    primary: 'red',
    secondary: 'blue'
  }

  this.setThemeColors(colors);
},
methods: {
  setThemeColors(colors) {
    let style = document.documentElement.style;

    for (let key of Object.keys(colors)) {
      style.setProperty("--theme-color-" + key, colors[key]);
    }
  }
}

Все настроено из root вашей таблицы стилей. Проверьте ниже, чтобы использовать его, 

<style lang="scss">
$color-primary: var(--theme-color-primary);
$color-secondary: var(--theme-color-secondary);

.color-primary {
  color: var(--theme-color-primary)
}
.color-secondary {
  color: var(--theme-color-secondary)
}
</style>

Но возникла другая проблема: css переменные не работают в IE11 и ниже!

0 голосов
/ 27 января 2020

Ключевой особенностью S CSS является то, что он компилирует читаемый / менее раздутый CSS в обычный CSS. Корректировка стилей на лету внутри одного компонента файла невозможна.

См. Этот вопрос для возможных обходных путей: { ссылка }

Если вы ищете решение, вы можете получить цвета до Ваше приложение vue загружается.

...