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( ...
随机推荐
- 开源项目——小Q聊天机器人V1.0
小Q聊天机器人V1.0 http://blog.csdn.net/baiyuliang2013/article/details/51386281 小Q聊天机器人V1.1 http://blog.csd ...
- 无刷新更新listview
闲来无事,写点水文吧!有用得着的可以参考下,无刷新更新listview是什么意思呢?举个例子,在订单类listview列表中,常常会有各种订单状态,拿商城类app来说,会有待付款,待收货,确认收货等等 ...
- 统计git代码提交量
以下是我写的一个脚本,可以统计在某个项目中,自己修改代码的行数,包括增加多少行,删除多少行. 可以统计当天,24小时内或全部时间内.使用时需要把代码中的author对应的值换成自己的名字. 代码如下: ...
- How To: Run Tapestry5 On JBoss 6/7
Tapestry 5.x cannot find the core pages and components from the URLs provided from classloaders in J ...
- Objective-C实现常用的4种排序算法
OC实现的4种排序又来了! 4种排序分别是:快速排序.冒泡排序.选择排序.插入排序,其他的我就不写了,因为OC里的数组中不能存放基本数据类型,如int不能存放,只能放对象,所以所有的数据我用了NSNu ...
- 【IOS 开发】Object - C 面向对象 - 类 , 对象 , 成员变量 , 成员方法
. 一. 类定义 类定义需要实现两部分 : -- 接口部分 : 定义类的成员变量和方法, 方法是抽象的, 在头文件中定义; -- 实现部分 : 引入接口部分的头文件, 实现抽象方法; 1. 接口部分定 ...
- iOS中 Swift初级入门学习(三)
// // main.swift // LessonSwift-03 // // Copyright (c) 2015年 韩俊强. All rights reserved. // import Fou ...
- html倒计时代码
<SPAN id=span_dt_dt></SPAN> <SCRIPT language=javascript> <!-- //document.write( ...
- Cocos2D:塔防游戏制作之旅(七)
用这3个变量,你可以创建多种不同类型的炮塔,它们可以有着不同的攻击属性,比如长距离重型攻击力,但是慢速攻击的炮塔,或者是渴望快速攻击但是攻击范围近的炮塔. 最后,代码包括了一个draw方法,它在炮塔周 ...
- 分布式内存网格Hazelcast源码导读
去年项目需要看了hazelcast源码,当时记录的笔记. Node是节点的抽象,里面包含节点引擎.客户端引擎.分区服务.集群服务.组播服务.连接管理.命令管理.组播属性.节点配置.本地成员.tcp地址 ...