亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

vue+element 多種主題切換

標簽:
CSS3 vuex

在公司负责平台的总体架构,领导要求可以借助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
}






點擊查看更多內容
1人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
11
獲贊與收藏
84

關注作者,訂閱最新文章

閱讀免費教程

感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消