Vue修改主题&CSS全局变量

Vue修改主题颜色

使用CSS全局变量

用于统一修改主题色

• 定义：

  /*Vue写在App.vue的style里*/
  :root {
      --theme-color: pink;
  }
  

• 使用：

  /*每个位置都可以这样使用，即颜色为pink*/
  color: var(--theme-color);
  

• 动态修改：

  /*选中文档节点，好像全局变量是在html文档上的，所以可以这样动态修改*/
  document.documentElement.style.setProperty("--theme-color","yellow");
  

Less变量：用@定义。Sass变量：用$定义

Vue修改主题样式

修改主题，除了颜色，可能也会改一些样式，如宽高布局

• 方法：根据不同字段，动态引入不同CSS（Less）
• 写在Vue.app里，使用require()引入不同规模主题样式

修改主题遇到异步问题

1. App.vue里，设置阀门，等需要哪套颜色的接口返回，再渲染页面

   <router-view  v-if="themeFlag" />
   

2. 看情况，可以使用setTimeout

通知各个组件修改主题

• 选择Vuex状态共享