Условно задайте основной цвет в Vue - PullRequest
Новая
       80

Условно задайте основной цвет в Vue

0 голосов
/ 21 ноября 2019

Я написал приложение многократного использования в Vue и скомпилировал его как библиотеку. Я установил глобальную переменную $brand-color в файле SCSS, который является основным цветом приложения (кнопки, границы, цвета шрифта). Я использую эту переменную в других файлах компонентов SCSS.

Я разместил свое приложение на веб-сайте моего клиента, и все работает нормально. Прямо сейчас у меня есть другой клиент, который готов использовать мое приложение. НО ... новый клиент хочет, чтобы мое приложение отличалось от $brand-color от моего старого. Каков наилучший способ решения этой проблемы?

Одна вещь, которая приходит мне в голову, - это установить переменную хранилища со значением $brand-color, которое зависит от location.host, и стилей связывания всех «фирменных» элементов. ,

switch (location.host) {
 case 'client1.com':
    context.commit('setMainColor', '#ff0000');
    ...
 case 'client2.com':
    context.commit('setMainColor', '#16c100');
    ...
}

Но это будет очень больно. Я должен был бы применить много изменений во всех моих компонентах. Есть ли лучшее решение, связывающее стили всех компонентов?

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

Ответы [ 2 ]

0 голосов
/ 21 ноября 2019

Итак, наконец, я устанавливаю значение хранилища в зависимости от моего клиента и подготовленного набора классов SCSS, указанных для каждого клиента, то есть: 

.btn-client1 {
 background: red;
}

.btn-client2 {
 background: blue;
}
...

и связываю классы для определенных элементов: 

:class="`btn-${client}`"`
0 голосов
/ 21 ноября 2019

Вы можете иметь 2 файла, каждый файл определяется переменной scss для разных клиентов:

customer1_variables.scss 

$brand-color: green

customer2_variables.scss 

$brand-color: red

И вы можете импортировать его в файл javascript

main.js 

switch (location.host) {
 case 'client1.com':
    import './customer1_variables.scss'
    ...
 case 'client2.com':
    import './customer2_variables.scss'
    ...
}

Другое решение заключается в использовании vue-style-компонент. Вы можете проверить эту статью для более подробной информации

...