Question

在我的Vue应用程序中，我想动态更改主题。即，我为不同类型的用户创建了3个不同的主题，并且我还创建了API调用以标识已登录的用户类型。根据API调用的结果，我想更改Vue应用程序的主题。 SCSS中的主题文件，我已经在下面附加了App.vue文件。

<template>
  <div id="app">
    <component :is="layout">
    </component>
  </div>
</template>

<script>
  import Pages from "./mixins/PagesScripts";

  const defaultLayout = "default-layout";
  export default {
    name: 'App',
    computed: {
      layout() {
        // TODO: Implement more layout and layout rendering mechanisms here
        return defaultLayout;
      }
    },
    mixins: [Pages],
    mounted(){
      // Here I will call the API using Axios and based on the API result, I want to change the 
      // below SCSS file to pages1,pages2 etc..
    }
  };
</script>
<style lang="scss">
  @import "assets/scss/pages";
</style>

我正在使用Vue-CLI版本4.4.6。

Answer 1

如果您不想一次加载所有主题（主题很重或您有很多主题） - 将 <link> 注入标题是一种选择。但这对于开发过程和用户体验来说不是很灵活。

// ...
  methods: {
    injectThemeLink(themeFile){
      this.file = document.createElement('link');
      file.rel = 'stylesheet';
      file.href = file
      document.head.appendChild(file)
    },

    updateThemeFile(themeFile){
      this.file.setAttribute('href', themeFile)
    }
  }
// ...

一种更简单的方法 - 加载所有主题以使用户切换顺畅。但通常，您可以将主题定义为一组 CSS 变量并根据 <body> 属性进行更改，例如：

<body theme="red">...</body>

像这样使用：

/* all.css */
::root {
  --text-color: black;
}
/* red.css */
body[theme=red]{
  --text-color: red;
}

/* green.css */
body[theme=red]{
  --text-color: green;
}

/* in components */
p { 
  color: var(--text-color);
}

如何基于Vue JS中Axios的结果动态加载SCSS文件

1 个答案: