Полностью отдельные стили в зависимости от маршрута - Vue - PullRequest
Новая
       9

Полностью отдельные стили в зависимости от маршрута - Vue

0 голосов
/ 04 августа 2020

В настоящее время я использую библиотеку пользовательского интерфейса в main.js для всех маршрутов, но я хочу, чтобы определенные маршруты были полностью изолированы от библиотеки пользовательского интерфейса и имели настраиваемые стили. Как мне этого добиться?

  • Использование <style scoped> не работает, потому что мне нужно работать с тегом body.
  • Использование <style> не работает, потому что если я посетить маршрут пользовательского стиля и go вернуться к обычному маршруту, стили из маршрута пользовательского стиля переносятся

1 Ответ

2 голосов
/ 04 августа 2020

Вы можете использовать <style scoped>, а для всего, что выходит за рамки компонента, используйте JS.

Например, если вы хотите, чтобы body имел определенный стиль для определенного маршрута , вы можете добавить стили в ловушку created и удалить их в ловушке beforeDestroy: 

created() {
    document.getElementsByTagName("body")[0].style.padding = "20rem";
},
beforeDestroy() {
    document.getElementsByTagName("body")[0].style.padding = "0rem";
}

Вы даже можете создать целую таблицу стилей и добавить ее в head: 

created() {
    const style = document.createElement("style");
    style.setAttribute("rel", "stylesheet");
    style.setAttribute("type", "text/css");
    style.innerHTML = "body { padding: 20rem }";
    document.getElementsByTagName("head")[0].appendChild(style);
},
beforeDestroy() {
    const head = document.getElementsByTagName("head")[0];
    head.removeChild(head.children[head.childElementCount - 1]);
}

Просто убедитесь, что вы правильно выполняете очистку при переходе с маршрута, так как вы можете в конечном итоге оставить таблицу стилей, если, например, head.children[head.childElementCount - 1] не вернет добавленную вами таблицу стилей.

...