vue 更换element版本_更换主题 · vue-element-admin · 看云_涂姬的博客-程序员宅基地

技术标签: vue 更换element版本  

# 更换主题

本项目基于 element-ui 默认视觉风格搭建了。如果对视觉风格有额外的要求可以按照[官方自定义主题指导](http://element-cn.eleme.io/#/zh-CN/component/custom-theme)。该方案是通过样式变量覆盖的方式。

## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96)样式覆盖

element-ui 的通用样式变量可能无法满足所有定制需求,你可以通过覆盖默认的组件样式的方式实现。 由于 element-ui 的样式我们是在全局引入的,所以你想在某个`view`里面覆盖它的样式就不能加 scoped,但你又想只覆盖这个页面的 element 样式,你就可在它的父级加一个 class,以用命名空间来解决问题。或者使用[深度作用选择器](https://vue-loader.vuejs.org/zh/guide/scoped-css.html#%E6%B7%B1%E5%BA%A6%E4%BD%9C%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8)。

~~~

/* 你的命名空间 */

.article-page {

/* element-ui 元素 */

.el-tag {

margin-right: 0px;

}

}

~~~

一些全局的 element-ui 样式修改可以在[@/src/styles/element-ui.scss](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/styles/element-ui.scss)中进行设置。

## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#%E5%8A%A8%E6%80%81%E6%8D%A2%E8%82%A4)动态换肤

本项目提供了两种动态换肤的功能,各有利弊,请结合个人需求自行选择。

### [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#element-ui-%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3%E9%A1%B5%E9%9D%A2-%E6%8D%A2%E8%82%A4%E6%96%B9%E5%BC%8F)element-ui 官方文档页面 换肤方式

element-ui 升级为 2.0 之后官方文档的右上角提供了动态换肤的功能,本项目也提供了改功能。 代码地址:[@/src/components/ThemePicker](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/ThemePicker/index.vue)。

**简单说明一下它的原理:**element-ui 2.0 版本之后所有的样式都是基于 SCSS 编写的,所有的颜色都是基于几个基础颜色[变量](https://github.com/PanJiaChen/custom-element-theme/blob/master/element-variables.scss)来设置的,所以就不难实现动态换肤了,只要找到那几个颜色变量修改它就可以了。 首先我们需要拿到通过`package.json`拿到 element-ui 的版本号,根据该版本号去请求相应的样式。拿到样式之后将样色,通过正则匹配和替换,将颜色变量替换成你需要的,之后动态添加`style`标签来覆盖原有的 css 样式。

> ## TIP

>

> 这里需要获取 element-ui 的版本号,从而锁定版本,以免将来 Element 升级时受到非兼容性更新的影响。

~~~

const version = require('element-ui/package.json').version

const url = `https://unpkg.com/[email protected]${version}/lib/theme-chalk/index.css`

this.getCSSString(url, chalkHandler, 'chalk')

getCSSString(url, callback, variable) {

const xhr = new XMLHttpRequest()

xhr.onreadystatechange = () => {

if (xhr.readyState === 4 && xhr.status === 200) {

this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')

callback()

}

}

xhr.open('GET', url)

xhr.send()

}

~~~

**使用方式**

在项目中引入 ThemePicker 组件即可

~~~

import ThemePicker from '@/components/ThemePicker'

~~~

* 优点

* 无需准备多套主题,可以自由动态换肤

* 缺点

* 自定义不够,只支持基础颜色的切换

### [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#%E5%A4%9A%E5%A5%97%E4%B8%BB%E9%A2%98%E6%8D%A2%E8%82%A4)多套主题换肤

本方法就是最常见的换肤方式,本地存放多套主题,两者有不同的命名空间,如写两套主题,一套叫`day-theme`,一套叫`night-theme`,`night-theme`主题都在一个`.night-theme`的命名空间下,我们动态的在 body 上 add`.night-theme`; remove`.night-theme`。

#### [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/theme.html#%E4%BD%BF%E7%94%A8)使用

> 我们这里基于官方的主题生成库[element-theme](https://github.com/ElementUI/element-theme)进行了相应的改造。

首先我们下载[custom-element-theme](https://github.com/PanJiaChen/custom-element-theme)项目

~~~

[email protected]:PanJiaChen/custom-element-theme.git

~~~

之后全局安装主题生成工具

~~~

npm i element-theme -g

~~~

进入项目目录 安装相关依赖

~~~

npm install

~~~

首先执行`et -i`生成`element-variables.scss`存放样式变量的文件,然后进入`element-variables.scss`文件 修改你自己需要的变量,修改完成之后执行`et`, 编译主题,最后执行`gulp`生成命名空间。所有生成文件在`dist`目录下,你只需复制文件下所有内容到`vue-element-admin`项目中`src/assets/custom-theme`进行覆盖替换就行

> ## TIP

>

> 如果需要修改打包生成样式命名空间的名字 只要修改该[变量](https://github.com/PanJiaChen/custom-element-theme/blob/master/gulpfile.js#L6)即可

![](https://wpimg.wallstcn.com/0726b472-90f4-4fe9-a665-26fb8f9795c3.gif)

[更多动态换肤文章](https://segmentfault.com/a/1190000009762198#articleHeader2)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42228776/article/details/112896753

智能推荐

Silverlight学习笔记十六自定义控件之一个漂亮的Gauge(仪表盘)_weixin_30662011的博客-程序员宅基地

我们可以在Silverlight可以自己定义我们需要的控件。这一节是自定义的Gauge控件(仪表)。呵呵翻译的不是很好。下面是演示效果:一.自定义控件步骤:步骤1:CircularGaugeControl用于定义控件的属性using System;using System.Net;using System.Window...

百度地图api用法_青灬河℡的博客-程序员宅基地

首先 ,如果想调用百度地图api,你需要获取一个百度地图api的密钥。获取密钥你需要注册百度开发者,根据提示走就行了,申请密钥很简单,在百度地图api的首页就有相关链接,填写相关信息百度就会给你一个密钥了。接下来,就是引入百度地图的api<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&...

ubuntu linux拼音输入法,Ubuntu 中文拼音输入法小结_乐的乐快的博客-程序员宅基地

这两天讨论了一些拼音输入法的话题,我做个小小的总结,欢迎讨论。眼下 Ubuntu 默认的输入平台是 ibus,随光盘发布 ibus-pinyin,默认的五笔输入法是ibus-table-wubi,繁体中文默认输入法是 ibus-chewing。我只会用拼音,五笔和酷音的情况不了解。下面我简单总结下我所知的几个常见输入法的情况,也看看各位认为将来 Ubuntu 默认使用哪个更好。1. IBusibu...

js基础复习——document元素大小和滚动_zhang070514的博客-程序员宅基地

1、offsetLeft/TopoffsetLeft/offsetTop是相对于offsetParent左上角的x/y坐标。offsetParent是最接近的祖先元素,成为最接近的祖先元素为下列条件之一:1.css定位(position为absolute,relative或fixed)2.元素为td th table3.body元素 <style> .main{ position: absolute; left: 150

linux一个进程通知另外一个进程,Linux进程通信学习笔记_吴域的博客-程序员宅基地

一.为什么需要进程通信1)数据传输一个进程需要把它的数据发送给另一个进程。2)资源共享多个进程之间共享同样的资源。3)通知事件一个进程向另外一个进程发送消息,通知它发生了某事件。4)进程控制控制运行、停止等。二.IPC的由来1)Unix进程通信2)SystemV进程通信3)POSIX(Portable Operating System Interface)进程通信三.进程通信方式分类1.管道通信(...

java流处理程序设计_JAVA IO流处理程序设计实验报告(附完整代码)_三山卡夫卡的博客-程序员宅基地

String s=reader.nextLine();try {// 异常处理FileWriter toFlie=new FileWriter(file);//通过底层流写入文件BufferedWriter out=new BufferedWriter(toFlie);//通过缓冲流将字符串写入底层流out.write(s);out.close();toFlie.close();}catch(IO...

随便推点

音视频即时通讯开发功能介绍_Allen_lin的博客-程序员宅基地

音视频即时通讯开发功能介绍          即时通讯开发,也叫音视频即时通信开发。随着互联网的发展,人们之间的交流逐步从电话移向网络。每天都有相当多的人在使用各种网络交流工具,如Anychat,腾讯QQ,ICQ,MSN,新浪微博。  可以看出人们对于网络上即时的沟通方式是非常敏锐的,所能容纳的程度也远远超过我们的预计。然而目前大部分网络交流工具都还是以文字为主,语音视频功能大部分还是

php引用字体,PHP 载入一新字体_銃君的博客-程序员宅基地

用户评论:siker at norwinter dot com (2005-08-28 18:37:30)Working under the assumption that the only 'architecture dependant' part of the font files is endianness, I wrote a quick and dirty Python script t...

4.23_济源IT小伙一枚的博客-程序员宅基地

过滤器内容:1.过滤器2.正则表达式3.log4j4.Servelt5.多表联合查询日期:2020.04.23作者:爱猫狗的小郝_河南济源package hsy.cool.filter;import hsy.cool.util.MybatisUtils;import org.apache.log4j.Logger;import javax.servlet.*;im...

社群营销——新的商业模式_清心 微盛·企微管家的博客-程序员宅基地

社群目前是各大品牌新的营销战场,因为互联网流量的费用越来越贵,相对来说社群的费用会少很多,所以大家都在纷纷建立自己的社群。社群就像“老鼠窝”,而基于社群的营销称为“老鼠窝”战略。懂社群是引爆社群的前提和基础,只有深谙社群才能引爆。要懂用户在互联网上所分布的地图,也就是用户的结构和文化。这需要做到三个方面:理解社群是未来新商业的标配;学会构建社群,尤其是企业微信群;找到目标用户的互联网聚集地。1、社群营销需要思考的问题传统商业是杀猪的模式,社群思维的商业是养鱼的模式。中国过往30年的商业,大部分企业都是

mysql5.7安装完后出现_MySQL 5.7 安装完成后,首次登陆的几个问题_保皇的博客-程序员宅基地

MySQL : 5.7.20 MySQL Community Server (GPL)1.首次登陆后修改密码:根据安装时的选择不同,有mysqld_safe用mysqld_safe,没有就用mysqld。正常安装都应该在/usr/sbin目录下a)启动mysqlmysqld_safe --user=mysql--skip-grant-tables--skip-networking&b...

Android知识总结--适合中高级(下)_不轻易妥协的博客-程序员宅基地

1、Activity生命周期?onCreate() -> onStart() -> onResume() -> onPause() -> onStop() -> onDetroy()  2、Service生命周期?service 启动方式有两种,一种是通过startService()方式进行启动,另一种是通过bindService()方式进行启动。不同的启动方...

推荐文章

热门文章

相关标签