页面换肤

场景需求

项目中一些页面需要换成另一种UI风格;并不是所有的页面都换UI展示;

思路

通过路由来判断此页面用哪一套UI

步骤

1、定义theme.scss全局文件

以下代码全为演示所用

$color: var(--color, #ffd029);
$border-color: var(--border-color, #ff9595);

2、把theme.scss通过webpack的loaderOptions进行全局引入

具体可参考文档
注意!!由于sass-loader版本不同,loaderOptions中prependData的名字也不同;

sass-loader v8-中,为"data"
sass-loader v8中,为"prependData"
sass-loader v10+中,为"additionalData"

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/theme.scss";`,
      },
    },
  },
  }

设置完webpack的loaderOptions,最好重新开启一下服务,这时你声明的颜色变量已经可以正常显示了

3、定义变换的UI变量对象

生成theme.js文件,如下

export const darkTheme = {
    '--color':"#40a9ff",
    "--border-color": "#d9d9d9",
};

4、在路由中设置

import { darkTheme } from "@/assets/theme.js";

router.afterEach((to, from) => {
 //根据自己的需求来定义怎么显示
  if (to.matched.some(r => r.meta.theme === 'dark')) {
    toggleTheme(darkTheme);
  } else {
    toggleDefaultTheme();
  }
});

function toggleTheme(theme) {
  for (let i in theme) {
    document.body.style.setProperty(i, theme[i]);
  }
}

function toggleDefaultTheme() {
  document.body.style = "";
}

这时只要去判断路由上的meta即可;

关于CSS、SCSS全局变量声明与使用

总结

1、document.body.style.setProperty('--color', '#222'),给body的style添加样式变量;

2、theme.scss中,$color: var(--color, '#888')它意为scss中使用css的全局变量值;
var()函数是用来引用css的变量值的var(--color, '#888')意思是去找css的全局变量--color,找到了就用它的值(也就是第一步中设置的#222),若在css中找不到--color变量,则使用第二个参数的值#888

3、在style中使用scss的变量值


你可能感兴趣的:(页面换肤)