vue,elementUI切换主题,自定义主题

Easter79 等级 422 0 0
标签: httpsvuewebpack

本文介绍两种elementUI切换主题色的方法

项目示例:http://test.ofoyou.com/theme/

git代码:记得star哦,谢谢

1:官方提供的方法,直接修改scss文件达到修改目的,开发人员使用(比官网容易理解,有图有真相)。

2:通过选颜色值在项目中达到换肤目的,用户使用。此方法根据官方主题切换修改而来

先搭建项目:

  npm install -g vue //全局安装vue

  npm install -g webpack //全局安装webpack

npm install -g vue-cli //全局安装vue-cli

---->

进入项目目录--->

vue-init webpack my-project (vue init webpack my-project 这个官方已不用,使用会报错)

vue,elementUI切换主题,自定义主题

   然后一次做下去就好了--->

  安装elementUI :npm i element-ui -S

  安装sass: npm install node-sass sass-loader --save-dev

  项目结构 -----------------运行结果

  vue,elementUI切换主题,自定义主题        vue,elementUI切换主题,自定义主题

1. 第一种方法,官方提供的方法,直接修改scss

在main.js引入elementUI,以及主题:(主题是可以自己设置下载配置的--官方工具

vue,elementUI切换主题,自定义主题

  然后在项目src->assets目录下创建element-variables.scss 内容可以从官网复制过来,  然后在main.js引入,见上图注释的代码

  vue,elementUI切换主题,自定义主题   结束第一种,可以随便写几个element组件试试下

2:通过选颜色值在项目中达到换肤目的,根据官方修改主题项目修改而来

说明:项目主题分为两部分,一个是element组件主题,一个是自己定义组件或者DOM主题。

此方法主要思路就是:用户先从线上拉去配置主题的css文件,当用户更改颜色后,在把css文件里面所有的颜色值

替换掉,然后把这个css文件重新插入到html中达到改变颜色。

在这里都需要修改再方法1的基础上进行扩展:在element-variables.scss添加 默认我们自己设置的颜色。

当然这个颜色也可以在其他公共css修改。

  1. vue,elementUI切换主题,自定义主题

  2. 安装两个插件:

    npm install css-color-function  

    npm install object-assign

   3. vue,elementUI切换主题,自定义主题

  4. 从 unpkg.com/element-ui/lib/theme-chalk/index.css 把最新css文件复制下来copy到项目静态文件目录中:

    因为:项目中是先从element官方拉取主题css,如果拉取不到再去本地找备用的。

    vue,elementUI切换主题,自定义主题

  5.接下来就是写代码了。在App.vue上引入自定义的修改主题组件,在随便弄些element组件观察变化:

    vue,elementUI切换主题,自定义主题

  5. 写组件:Theme.vue  

<!-- 切换主题色  -->
<template>
    <div>
        <el-color-picker  @change="colorChange" v-model="colors.primary" ></el-color-picker>
    </div>
</template>
<script>
import generateColors from "../../utils/color";
import objectAssign from "object-assign";
export default {
    name: "App",
    data() {
        return {
            originalStylesheetCount: -1,//记录当前已引入style数量
            originalStyle: "",//获取拿到的.css的字符串
            colors: {
                //颜色选择器默认颜色值,这个值要和element-variables一样
                primary: "#409EFF"
            },
            // primaryColor: "", //提交成功后设置默认颜色
            cssUrl: [
                "//unpkg.com/element-ui/lib/theme-chalk/index.css",
                "./static/css/index.css"
            ]
        };
    },
    methods: {
        colorChange(e) {
            if(!e)return;
            localStorage.setItem('color',e)
            this.primaryColor = this.colors.primary;
            this.colors = objectAssign(
                {},
                this.colors,
                generateColors(this.colors.primary)
            );
            this.writeNewStyle();
        },
        writeNewStyle() {
            let cssText = this.originalStyle;
            Object.keys(this.colors).forEach(key => {
                cssText = cssText.replace(
                    new RegExp("(:|\\s+)" + key, "g"),
                    "$1" + this.colors[key]
                );
            });
            if (this.originalStylesheetCount === document.styleSheets.length) {
                // 如果之前没有插入就插入
                const style = document.createElement("style");
                style.innerText =
                    ".primaryColor{background-color:" + this.colors.primary + "}" + cssText;
                document.head.appendChild(style);
            } else {
                // 如果之前没有插入就修改
                document.head.lastChild.innerText =
                    ".primaryColor{background-color:" +
                    this.colors.primary +
                    "} " +
                    cssText;
            }
        },
        getIndexStyle(url) {
            let that = this;
            var request = new XMLHttpRequest();
            request.open("GET", url);
            request.onreadystatechange = function() {
                if (
                    request.readyState === 4 &&
                    (request.status == 200 || request.status == 304)
                ) {
                    // 调用本地的如果拿不到会得到html,html是不行的
                    if (request.response && !/DOCTYPE/gi.test(request.response)) {
                        that.originalStyle = that.getStyleTemplate(request.response);
                        that.writeNewStyle()
                    } else {
                        that.originalStyle = "";
                    }
                } else {
                    that.originalStyle = "";
                }
            };
            request.send(null);
        },
        getStyleTemplate(data) {
            const colorMap = {
                "#3a8ee6": "shade-1",
                "#409eff": "primary",
                "#53a8ff": "light-1",
                "#66b1ff": "light-2",
                "#79bbff": "light-3",
                "#8cc5ff": "light-4",
                "#a0cfff": "light-5",
                "#b3d8ff": "light-6",
                "#c6e2ff": "light-7",
                "#d9ecff": "light-8",
                "#ecf5ff": "light-9"
            };
            Object.keys(colorMap).forEach(key => {
                const value = colorMap[key];
                data = data.replace(new RegExp(key, "ig"), value);
            });
            return data;
        }
    },
    mounted() {
        // 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下
        let that = this;
        // 如果是记住用户的状态就需要,在主题切换的时候记录颜色值,在下次打开的时候从新赋值
        this.colors.primary = localStorage.getItem('color')||this.colors.primary//例如
        this.getIndexStyle(this.cssUrl[0]);
        setTimeout(function() {
            if (that.originalStyle) {
                return;
            } else {
                that.getIndexStyle(that.cssUrl[1]);
            }
        }, 2000);
        this.$nextTick(() => {
            // 获取页面一共引入了多少个style 文件
            this.originalStylesheetCount = document.styleSheets.length;
        });
    }
};
</script>
<style>
</style>
收藏
评论区

相关推荐

《精通react/vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件
前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, antdesignvue, iView等成熟的UI框架, react生态的antdesign, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和
Vue 项目性能优化—实践指南
Vue 项目性能优化—实践指南 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效
Vue开发指南:你都需要学点啥?
如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。 另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、Vue CLI和Nuxt。 也许您在面对这些未知的术语和
ElementUI 组件库之外,供我们选择的 Vue 组件库还有很多!
Vue 组件千千万,只要不行咱就换。 ElementUI 近况 根据我最近的观察,得知一些关于 ElementUI 维护人员都退去的消息,这意味着什么?意味着已经学不动的我们,不用再去学新东西了,开不开心?意不意外?
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
前言在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。第一步,安装webpack简易框架vue init webpacksimple marquee 这里会用到vue init 命令,如果你的cli版本是3或者以上,那么在此之前你需要安装vue/cliinit npm install g @vue
vscode+vue简单安装教程
1、安装vscode、node.js。2、打开vscode终端,全局安装vuecli:npm install g vuecli用于构建项目。3、继续安装webpack(打包工具):npm install g webpack。4、安装完成创建一个文件夹用于存放项目,比如myvue,cd到该文件夹,使用项目创建命令:vue init webpack myvue。
Vue 从安装到创建项目
1.安装Node可以直接在官网中下载安装默认自动安装Node和NPM(Node Package Manager) 完成后检查安装版本:node v npm v2.安装webpack webpack全局安装npm install webpack g3.安装vue脚手架 全局安装脚手架3npm install @vue/cli g 备注
Java快速开发平台强大的代码生成器,JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布
JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 -------------------------------------- ![](https://static.oschina.net/uploads/space/2018/0517/123830_aEfq_930898.png) >     此版本为Vue+Element
2016我的心路历程:从 Vue 到 Webpack 到 iView
> 2016年工作中做过最自豪的两件事情: * 把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范; * 开源 [iView](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fiview%2Fiview) 项目。 初识 Vue ===
2016我的心路历程:从 Vue 到 Webpack 到 iView
> 2016年工作中做过最自豪的两件事情: * 把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范; * 开源 [iView](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fiview%2Fiview) 项目。 初识 Vue ===
ElementUI 不维护了?供我们选择的 Vue 组件库还有很多!
前文回顾:[Vue+Spring Boot 前后端分离的商城项目开源啦!](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2Fhan-1034683568%2Fp%2F13496643.html) Vue 组件千千万,只要不行咱就换。 `ElementU
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
springboot+vue 登录页面(一)
首先了解的技术点是: 后台:springboot,mybatis,mybatis逆向工程,mysql,日志 前端: nodejs,npm ,cnpm,vue,vue-cli,webpack,element ui,router,axios 开发工具:idea,webstorm 该项目前端使用的是vue ,目的是实现前后端分离 后台: 1.选择spr
Vue项目添加ElementUI
1\. 在上一篇,搭建环境,创建vue项目目录结构如下:编写工具,本人推荐:Visual Studio Code2\. 进入到项目文件夹,执行加载elementui组件命令:npm i elementui S 3\. 在main.js代码里添加对elementui的引用:import ElementUI from 'elementui' import 'el