vue怎么实现更换主题功能

这篇文章主要讲解了“Vue怎么实现更换主题功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么实现更换主题功能”吧！

方式一：class切换方式

实现：

在每个需要更换的页面定义多个class，根据运行时标识动态的切换class名称实现加载不同的样式，这种方式较为简单

优点：

• 不需要修改构建工具相关

• 业务开发过程可以实现，没有限制

• 支持动态切换

缺点：

• 逻辑分散耦合在各个页面，一旦需要修改，涉及修改的页面较多

• 代码需要预先内置，不支持动态颜色修改

方式二：ElementUI的实现

实现：

对主题涉及的颜色使用特殊值

如:UI需要白色#ffffff色值的时候使用一个相近的特征值颜色 如:#fffffe

// 将默认样式特征值替换为变量，用于多次替换   getStyleTemplate(data) {    const colORMap = {     '#fffffe': 'text_color'    };    Object.keys(colorMap).forEach(key => {     const value = colorMap[key];     data = data.replace(new RegExp(key, 'ig'), value);    });    return data;   },

在代码运行时动态获取到需要修改的颜色值

如: 需要修改#fffffe =》 #ff00ff

// 通过用户操作或者接口，获取到要替换的色值 colors:{     text_color: '#ff00ff'    }

查找页面所有style标签将其色值#fffffe正则匹配出来，替换为 #ff00ff

// 获取默认样式,可以从已加载的 style 中获取也可以从 CSS link 获取   getIndexStyle() {    document.querySelectorAll('style').forEach(item=>{     this.originalStyle += this.getStyleTemplate(item.textContent);    })   },   getCssLink(){     this.get('./cssPath.css').then(JSON=>{       this.originalStyle = this.getStyleTemplate(json.data);     })   }

在页面新加标签style覆盖默认值

// 替换默认样式表，插入 style 标签覆盖样式   writeNewStyle() {    let cssText = this.originalStyle;    log(cssText)    Object.keys(this.colors).forEach(key => {     cssText = cssText.replace(new RegExp('(:|\\s+)' + key, 'g'), '$1' + this.colors[key]);    });    cssText = cssText.replace(/\n/g,'')    if (this.originalStylesheetCount === document.styleSheets.length) {     const style = document.createElement('style');     style.innerText = cssText;     document.head.appendChild(style);    } else {     document.head.lastChild.innerText = cssText;    }   },

优点：

• 支持动态切换

• 支持动态色值

• 不需要内置多份样式

缺点：

• 业务开发过程中需要对ui给出的色值重定义，业务开发需要有一定的规则

• 无法修改背景图片

• 无法对懒加载的样式做处理，需要初始化加载全局所有样式

const ExtractTextPlugin = require('extract-text-webpack-plugin')// 抽离css module: { loaders: [      {//抽离css 通过link加载        test: /\.css$/,        loader: ExtractTextPlugin.extract({         fallback: 'style-loader',         use: 'css-loader'        })      }      ...       plugins: [    new ExtractTextPlugin({     filename: 'css/[name].css'    allChunks: true // 打包所有页面css到同一个css 文件    })  ]

• 无法动态修改背景图片

方式三：编译时多主题全量构建

实现：

• 定义多套样式

• 构建时将多套样式主题作为独立构建入口，构建出主题静态文件css文件

• 业务运行时动态加载不同的主题文件

优点：

• 支持动态切换主题

• 业务开发样式分离

• 编译时构建性能较好 缺点：

• 构建工具配置较为复杂，适用单入口应用，对多入口的支持不友好

• 需要定义全局 less 文件，在入口引入

• 业务需要额外操作

配合 rel="alternate stylesheet" 可预加载备选主题样式

方式四： 编译时选择性构建

实现：

• 内置多套皮肤

• 构建时传入参数，根据不同的构建参数加载不同的主题样式文件

优点：

• 构建工具配置较为简单，不需要业务做额外操作

• 多入口应用支持度好

缺点：

• 不支持动态切换

• 多个项目需要构建多次，需要构建系统支持

方式五：less动态变量

实现：

• 修改构建脚本，将所有页面less文件抽到同一个文件中

• 不编译less，页面直接加载less文件

• 使用less.js 在客户端编译less 文件

less: {    modifyVars: {},    javascriptEnabled: true   }

优点：

• 支持动态切换

• 支持动态色值

缺点：

• 客户端编译较耗性能/耗时

• 需要额外加载less.js mini文件size: 131KB

方式六：css变量

实现：

在需要变化的css属性定义变量

:root { --main-bg-color: pink;}body { background-color: var(--main-bg-color);}

在运行时动态的修改变量

document.body.style.setProperty('--primary', '#7F583F');

优点：

• 浏览器原生支持，无需额外操作

• 支持动态色值

缺点：

• 低版本兼容性不好 iOS Safari 9.3、 Android 5、 chrome forAndroid 76

UC、QQ、Baidu 等国内浏览器支持度较差

方式七： import动态加载

实现：

• 业务中预定义多套主题

• 运行时根据变量动态加载对应主题

if(a){  import('./thems/a/base.less')}else if(b){   import('./thems/b/base.less')}

优点：

• 支持动态切换

• 实现简单

缺点：

• 不支持动态色值

• 需要全局定义多套样式表

• 全局定义 class 无法定义变量在 vue style 中引用变量

注：

• 动态切换：是否支持在运行时切换皮肤

• 动态设置：是否支持在运行时动态设置皮肤颜色

• 支持变量：是否可以再全局定义变量 less 文件，然后在不同的页面引用 less，依赖其中的变量，还是需要在全局 less 文件里面定义全局 class

• 实现复杂度： 需要修改的代码量包括构建工具和业务代码

• 兼容性： 主流浏览器支持程度

• 性能：包括代码的首屏加载的 size、切换的速度、切换的时候会不会有闪动

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

感谢各位的阅读，以上就是“vue怎么实现更换主题功能”的内容了，经过本文的学习后，相信大家对vue怎么实现更换主题功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！