Vue前端实现 ”一键换肤“ 方法

我们网站在迭代升级时，经常会被产品要求更换网站配色这样的需求，或者提供入口，让用户自己选择页面的配色主题。那么我们该怎么去实现这种需求呢？下面一起和博主看看 Vue 实现前端 ”一键换肤“ 方法。

 一、技术核心

通过切换 css 选择器的方式实现主题样式的切换.

• 在组件中保留不变的样式，将需要变化的样式进行抽离；
• 提供多种样式，给不同的主题定义一个对应的 CSS 选择器；
• 根据不同主题通过切换 CSS 选择器设置不同的样式。

二、实现方法

提取公共 CSS 样式, 通过变量的形式切换主题

1、新建一个存放公共 css 变量的 variable.js 文件，将需要定义的 css 变量存放到该 js 文件，通过 css-vars-ponyfill 插件换肤。

// variable.js
// 字体变量
const baseSize = {
  "--font-size-first-level-title": "18px",
  "--font-size-second-level-title": "16px",
};

// 浅色
export const lightTheme = {
  "--themeColor": "#01cc8c",
  "--left-bg": "rgb(182, 23, 23)",
  "--right-bg": "rgb(63, 9, 9)",
  "--top-bg": "rgb(6, 36, 65)",
  "--bottom-bg": "rgb(55, 214, 10)",
  ...baseSize,
};

// 深色
export const darkTheme = {
  "--themeColor": "#56518C",
  "--left-bg": "#0094ff",
  "--right-bg": "blue",
  "--top-bg": "red",
  "--bottom-bg": "pink",
  ...baseSize,
};

2、在页面中使用 css 变量。

<style lang="sass">
  .left {
      background-color: var(--left-bg);
    	color: var(--themeColor);
      height: 500px;
      flex: 1;
    }
</style>

3、安装 css-vars-ponyfill 插件。

npm i css-vars-ponyfill

4、封装切换主题的 js

// theme.js
import { lightTheme, darkTheme } from "../src/assets/js/variable";
import cssVars from "css-vars-ponyfill";
export const initTheme = (theme = true) => {
  document.documentElement.setAttribute("data-theme", theme ? "light" : "dark");
  cssVars({
    watch: true, // 当添加，删除或修改其<link>或<style>元素的禁用或 href 属性时，ponyfill 将自行调用
    variables: theme ? lightTheme : darkTheme, // variables 自定义属性名/值对的集合
    onlyLegacy: false, // false  默认将 css 变量编译为浏览器识别的 css 样式  true 当浏览器不支持 css 变量的时候将 css 变量编译为识别的 css
  });
};

5、main.js 中调用 theme.js

import { initTheme } from './theme'
let theme = 条件 ? false : true
initTheme(theme)

6、图片路径如何解决?

// main.js
// lightTheme 和 darkTheme 是文件夹名字
Vue.prototype.SKIN_IMAGE_PATH = 条件 ? 'lightTheme' : 'darkTheme'

// .vue 文件
export default {
  data () {
    return {
      tip: require(`@assets/img/theme/${this.SKIN_IMAGE_PATH}/tip.png`),
    }
  }
}

结语

以上就是关于前端“一件换肤”的技术方案，希望对大家有用，感谢阅读。

以上关于Vue前端实现 ”一键换肤“ 方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。