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()
引入不同规模主题样式
修改主题遇到异步问题
-
App.vue里,设置阀门,等需要哪套颜色的接口返回,再渲染页面
<router-view v-if="themeFlag" />
-
看情况,可以使用setTimeout
通知各个组件修改主题
- 选择Vuex状态共享