Javascript

vue+element 多种主题切换

本文主要是介绍vue+element 多种主题切换,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

在公司负责平台的总体架构,领导要求可以借助element实现多种主题切换,研究了一下,记录一下:


一、安装 element-theme

npm i element-theme -g

二、安装element-theme-chalk

npm i element-theme-chalk -d

三、执行命令(执行完根目录下会产生element-variables.scss)

et -i

    默认scss名称是element-variables.scss,如果想自定义,执行下面的命令

et -i xxx.scss

四、更改想要修改配色的值,保存

五、执行命令 et (执行完主目录下生成theme的文件夹)

et  // 执行命令

    如果执行 et -i 生成的文件名称是自定义的,那么执行

et -c xxx.scss

六、安装 gulp、gulp-clean-css、gulp-css-wrap

npm i gulp gulp-clean-css gulp-css-wrap -d

七、在跟目录创建gulpfile.js文件,内容:

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')

var customThemeName = '.theme-default' // 名称随便改,改成什么最后生成的css文件中每个样式前面加上该名称的前缀
gulp.task('default', function() {
    return gulp.src( path.resolve('./index.css'))  // 准备加前缀的css文件位置
    .pipe(cssWrap({selector: customThemeName}))
    .pipe(cleanCSS()).pipe(gulp.dest('dist'))  // 执行后生成的文件名称
})

八、执行命令(执行完会在主目录下生成dist文件夹,文件夹中有index.css文件)

gulp

九、在vue项目中src下创建一个styles文件夹,将执行完 et 生成的theme文件夹中font文件夹放到styles文件夹中

十、将执行完 gulp 生成的dist文件夹中index.css文件放到styles文件夹中

十一、在styles文件夹中新建common.scss文件,文件中配置引入 gulp 生成的文件(自己改名)

@import "./theme-default.css";  // 我将gulp 生成的文件名称改为 theme-default.css

十二、在main.js引入common.scss

// 公用样式
import "./styles/common.scss"

十三、利用给document.body添加样式来切换主题

removeClass(document.body, "theme-black");
addClass(document.body, "theme-default");

export const removeClass = (ele, cls) => {
    if (hasClass(ele, cls)) {
        const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
        ele.className = ele.className.replace(reg, ' ')
    }
}

export const addClass = (ele, cls) => {
    if (!hasClass(ele, cls)) ele.className += ' ' + cls
}






这篇关于vue+element 多种主题切换的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!