vue2.0-基于elementui换肤[自定义主题]
0. 直接上 预览链接
1. 项目增加主题组件
在项目的src/components下添加skin文件夹
skin文件获取地址
2. 项目增加自定义主题
自定义添加主题下载地址 https://elementui.github.io/theme-chalk-preview/#/zh-CN
3. 项目引入和使用
选择你想要随主题改变的element元素在src/global/themeArray里面，不希望随主题改变的可以注释掉
选择皮肤之后把记录存在cookie里面。
再次打开浏览器访问项目钩子初始化的时候从cookie里面得到之前选择的皮肤。
至此整合完毕 源码地址
Vue学习大佬群493671066，美女多多。老司机快上车，来不及解释了。
作者相关Vue文章
打赏 衷心的表示感谢
vue2.0-基于elementui换肤[自定义主题]的更多相关文章
- [js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解
在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数 ...
- 基于vue2.0 +vuex+ element-ui后台管理系统:包括本地开发调试详细步骤
效果演示地址, github地址: demo演示: 1.About 此项目是 vue2.0 + element-ui + node+mongodb 构建的后台管理系统,所有的数据都是从 ...
- vue-基于elementui换肤
思路: 生成不同的css颜色文件,每个文件内部命名前加上.custom-颜色值做命名空间. 然后app.vue里引入全部的颜色文件. 用户点击某颜色,就在body加上class:custom-00a5 ...
- vue+less换肤，主题切换方案
新的项目对于客户自定义要求很高,然后换肤是其中一个很小的模块,经过了一段时间的摸索,看了许多文章,找到了几种方案. https://www.cnblogs.com/leiting/p/11203383 ...
- [js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程
在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli 安装vue命令行工具 2,vue init webpack vue-demo 使用v ...
- [js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程
我们接着上文继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样. 在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件 EventHandl ...
- vue2.0+elementUI构建单页面后台管理平台
git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...
- 简单的JS+CSS实现网页自定义换肤
1,实现效果 2,实现原理 主要原理是利用css变量设置颜色,用js动态修改变量,使颜色变化,兼容性如下: 实现换肤之前先要了解一下伪类选择器 :root ,还有css的 var() 函数和 set ...
- 干货分享：vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
随机推荐
- 【java虚拟机系列】JVM类加载器与ClassNotFoundException和NoClassDefFoundError
在我们日常的项目开发中,会经常碰到ClassNotFoundException和NoClassDefFoundError这两种异常,对于经验足够的工程师而言,可能很轻松的就可以解决,但是却不一定明白为 ...
- Spark集群术语
Spark集群术语解析 1. Application Application是用户在Spark上构建(编写)的程序,包含driver program 和executors(分布在集群中多个节点上运行的 ...
- Sky（dart）语言介绍-android学习之旅（十）
认识dart语言 google于2011年10月10日发布了"dart"语言的"早起预览版",google希望利用这款语言,帮助开发者克服javaScript的 ...
- Linux 内存管理之highmem简介
一.Linux内核地址空间 一般来说Linux 内核按照 3:1 的比率来划分虚拟内存(X86等):3 GB 的虚拟内存用于用户空间,1GB 的内存用于内核空间.当然有些体系结构如MIPS使用2:2 ...
- UNIX网络编程——UDP回射服务器程序（初级版本）以及漏洞分析
该函数提供的是一个迭代服务器,而不是像TCP服务器那样可以提供一个并发服务器.其中没有对fork的调用,因此单个服务器进程就得处理所有客户.一般来说,大多数TCP服务器是并发的,而大多数UDP服务器是 ...
- Fragment详解-android学习之旅（四十八）
Fragment的设计哲学 Fragment的继承体系 Fragment的开发 大部分都会继承如下的三个方法 Fragment与Activity的通信 Fragment与Activity交互信息 Fr ...
- 软考之路--从生活着手，看PV如何操作
PV操作,是软考当中一个很重要的考点,一听到这个名词,顿时赶脚高大上有么有,在软考的历年试题中,也不乏PV操作的身影,老师也对PV操作进行了一次讲课,那时年少,听得稀里糊涂,也不是很理解,在小编的理解 ...
- 用SpriteBuilder简化"耕牛遍地走"的动画效果(三)
接下来的代码和原文差不多,建立一个数组用来存放动画帧,然后用数组来初始化一个CCAnimation动画对象.接着将牛放在屏幕中心,然后运行动画: NSMutableArray *walkAnimFra ...
- C++在单继承、多继承、虚继承时，构造函数、复制构造函数、赋值操作符、析构函数的执行顺序和执行内容
一.本文目的与说明 1. 本文目的:理清在各种继承时,构造函数.复制构造函数.赋值操作符.析构函数的执行顺序和执行内容. 2. 说明:虽然复制构造函数属于构造函数的一种,有共同的地方,但是也具有一定的 ...
- PA 项目任务创建资源
-- 创建资源 DECLARE p_project_id NUMBER := 155233; p_task_id NUMBER := 244639; p_resource_list_member_id ...