Vue - Можно ли динамически стилизовать элемент html? - PullRequest
Новая
       3

Vue - Можно ли динамически стилизовать элемент html?

2 голосов
/ 15 апреля 2020

Короткая версия: В data() моего приложения я определяю определенные цвета. Я хочу, чтобы фон html -элемента был одним из этих цветов на основе выражения switch.

Длинная версия: В data() у меня есть следующий код: 

data() {
    return {
      item: {},
      color1: '',
      color2: '',
    };
  },

В моей функции created() я получаю предмет из своего бэкенд. Кроме того, я написал следующий код для оценки цветов для html -секции: 

switch (this.item.itemType) {
    case 'car': this.color1 = '#39ac39'; this.color2 = '#00ff00'; break;
    case 'bus': this.color1 = '#3333ff'; this.color2 = '#1a75ff'; break;
    case 'plane': this.color1 = '#ff66cc'; this.color2 = '#ffb3e6'; break;

    default: this.color1 = '#'; this.color2 = '#';
}

В моем разделе style я хочу стилизовать фон всего моего приложения (html - тег), который будет выглядеть следующим образом: 

<style>
html {
  background-color: linear-gradient(to bottom, color1, color2);
}
</style>

Возможно ли это с Vue?

Ответы [ 2 ]

2 голосов
/ 15 апреля 2020

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

:root {
  --color1:#000;
 --color2:#fff;
}

html {
  background-color: linear-gradient(to bottom,var(--color1), var(--color2));
}

script: 

switch (this.item.itemType) {
    case 'car': this.color1 = '#39ac39'; this.color2 = '#00ff00'; break;
    case 'bus': this.color1 = '#3333ff'; this.color2 = '#1a75ff'; break;
    case 'plane': this.color1 = '#ff66cc'; this.color2 = '#ffb3e6'; break;

    default: this.color1 = '#'; this.color2 = '#';
}

document.documentElement.style.setProperty("--color1", this.color1)

document.documentElement.style.setProperty("--color2", this.color2)
0 голосов
/ 15 апреля 2020

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

Вы можете использовать v- html для создания динамического c стиля 

<span v-html="style"></span>

, взятого из вычисляемого свойства. 

computed: {
    style() {
      return (
        "<style> html { background-image: linear-gradient(to bottom, " +
        this.color1 +
        ", " +
        this.color2 +
        "); }</style>"
      );
    }
  }

Но это будет существовать только до тех пор, пока компонент находится в древовидном представлении, После удаления ваш стиль также будет go.

Вот рабочий пример.

...