vue-基于elementui自定义主题更换皮肤及自定义内容的皮肤跟换
参考这篇博客https://blog.csdn.net/young_Emily/article/details/78591261做一遍,加上自己的一些理解
思路:通过自己上一篇博客https://www.cnblogs.com/aidixie/p/10309862.html做出多个不同的自定义主题,在不通的主体的css样式前加上不同的class名,在页面跟换不同肤色时,通过改变body上的calss来添加不同的样式。
一、elementui自定义主题更换皮肤
1.1、给不通的主题添加不同类名
在src/assets/下创建theme文件夹,放入不同主题
为不同主题中的index.css的每个选择器都前面加上class,例如在00ff22文件夹下的index.css下的每一选择前前面加上custom-00ff22类名(备注,00ff22文件夹有许多css文件,index.css应该包含其他css文件的全部样式。参考博客里没有相关的介绍,搞了好久才发现这个问题。)
添加方法:gulp-css-wrap工具的使用——[批量为css文件扩展命名空间]
其他主题都这样添加相应的类名。
1.2、app.vue里引入全部的颜色文件
在app.vue一次性全部引入各个主题
1.3、切换皮肤方法
在src添加文件夹utils,再在里面添加index.js,里面是换肤函数
//换肤加class函数
export function toggleClass (element, className) {
if (!element || !className) {
return
}
element.className = className
}
在theme.vue
<template>
<div class="hello">
<el-radio-group v-model="themeValue" @change='changeTheme'>
<el-radio :label="'custom-00ff22'">绿色(默认)</el-radio>
<el-radio :label="'custom-4400ff'">蓝色</el-radio>
<el-radio :label="'custom-cccccc'">灰色杂色</el-radio>
<el-radio :label="'custom-ff0000'">红色</el-radio>
</el-radio-group>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
import { toggleClass } from '@/utils/index'
export default {
data () {
return {
themeValue: 'custom-00ff22'
}
},
created(){
// 设置默认主题
localStorage.setItem('theme','custom-00ff22')
},
mounted(){
// 设置默认主题
toggleClass(document.body, localStorage.getItem('theme'));
},
methods: {
//换肤功能。
changeTheme(val){
toggleClass(document.body, val);
localStorage.setItem('theme',val)
}
}
}
</script>
<style scoped></style>
二、Vue的自定义内容实现主题颜色切换
2.1.定义各个颜色不同的css文件,选择前前面都加上相应的custon-颜色 类名
我们生成对应不同的主题定义不同的css,可以用sass解决,先安装sass各种依赖。
按照如下在vue2.x中安装sass并配置操作。
common.scss
mixi.scss
引入scss
theme.vue
<template>
<div class="hello">
<el-radio-group v-model="themeValue" @change='changeTheme' style="margin-bottom: 10px;">
<el-radio :label="'custom-00ff22'">绿色(默认)</el-radio>
<el-radio :label="'custom-4400ff'">蓝色</el-radio>
<el-radio :label="'custom-cccccc'">灰色杂色</el-radio>
<el-radio :label="'custom-ff0000'">红色</el-radio>
</el-radio-group>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<div class='msg'>
<span>自定义提示文本内容的皮肤展示</span>
<span>自定义提示文本内容的皮肤展示</span>
<span>自定义提示文本内容的皮肤展示</span>
</div>
</div>
</template>
<script>
import { toggleClass } from '@/utils/index'
export default {
data () {
return {
themeValue: 'custom-00ff22'
}
},
created(){
// 设置默认主题
localStorage.setItem('theme','custom-00ff22')
},
mounted(){
// 设置默认主题
toggleClass(document.body, localStorage.getItem('theme'));
},
methods: {
//换肤功能。
changeTheme(val){
toggleClass(document.body, val);
localStorage.setItem('theme',val)
}
}
}
</script>
<style lang='scss'>
.hello{
.msg{
margin: 10px ;
span{
display: block;
width: %;
margin: 0px %;
border-radius: 5px;
line-height: 32px;
color: #fff;
font: {
size: 13px;
weight: bold;
style: italic;
}
margin-bottom: 10px;
}
}
}
</style>
链接:https://pan.baidu.com/s/1HweLdXrpkT8qolvQEWvwtA
提取码:mdo1
vue-基于elementui自定义主题更换皮肤及自定义内容的皮肤跟换的更多相关文章
- VUE基于ElementUI搭建的简易单页后台
一.项目链接 GitHub 地址: https://github.com/imxiaoer/ElementUIAdmin 项目演示地址:https://imxiaoer.github.io/Eleme ...
- 【Vue 2.X】基于ElementUI 实现 dialog弹窗移动效果-自定义指令系列(二)
v-dialogDrag: 弹窗拖拽 使用: <el-dialog XXX v-dialogDrag></el-dialog> Vue.directive('dialogDra ...
- vue基于element-ui的三级CheckBox复选框
最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...
- vue基于 element-ui 实现菜单动画效果,任意添加 li 个数均匀撑满 ul 宽度
%)%)%%%))) .) .) .) .) .) .) .) .) .) .) .) .) .) .) .) .% %% %deg);}
- Material使用05 自定义主题、黑夜模式\白天模式切换
需求: 1 不使用materil依赖内建的主题,使用自己创建的主题 2 利用自己创建的主题实现白天模式和黑夜模式 1 自定义主题 1.1 创建自定义主题文件 them.scss // 引入materi ...
- Material使用06 自定义主题、黑夜模式\白天模式切换
需求: 1 不使用materil依赖内建的主题,使用自己创建的主题 2 利用自己创建的主题实现白天模式和黑夜模式 1 自定义主题 1.1 创建自定义主题文件 them.scss // 引入materi ...
- Vue的elementUI实现自定义主题
使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定义主题官方文档),先说项目中没有使用sc ...
- vue,elementUI切换主题,自定义主题
本文介绍两种elementUI切换主题色的方法 项目示例:http://test.ofoyou.com/theme/ git代码:记得star哦,谢谢 1:官方提供的方法,直接修改scss文件达到修改 ...
- vue中使用element-ui自定义主题后,vue-cli跑不起来了
环境:vue-cli 2.x版本 自己在官网配置了主题并放到了项目中https://element.eleme.cn/#/zh-CN/theme 然后,我的脚手架在我的电脑中休息了几天,就跑不通了呢! ...
随机推荐
- 杭电acm 1039题
这道题也比较简单,写三个函数判断三个条件即可..... 但是开始时我按照已经注释掉的提交,居然提示WA,我百思不得其解,后改成上面的判断式就可以了,求高手解答.... #include "i ...
- Mind Map-在线软件(转)
From http://blog.sina.com.cn/s/blog_74b687ac0102dtp1.html 第一款:http://tu.mindpin.com/ 用非常简单, 先用Email ...
- CH24C 逃不掉的路
edcc缩点之后跳倍增lca 丢个edcc缩点模板 Code: #include <cstdio> #include <cstring> using namespace std ...
- 树莓派(Raspberry Pi 3) centos7 扩容内存卡
在使用Win32DiskImager为一张空白的SD卡刷入新的centos7系统后,发现卡上的可用剩余空间并不大,用df -h查看,根目录下的空间使用率居然是25%,而且总空间也就2G左右.网上查到的 ...
- nfs搭建和挂载
1.搭建server a.创建共享目录 mkdir /nfs1 b.vim /etc/sysconfig/nfs 固定端口 c.vim /etc/export /nfs1 192.168.10 ...
- Django之后台管理二
前面讲到admin界面用户的注册以及修改,如果我们注册的用户密码忘记了该怎么办呢 在终端输入如下的命令进行重置 D:\django_test2>python manage.py shell Py ...
- AI-Info-Micron-Insight:工业 5.0,伟大的思想将殊途同归
ylbtech-AI-Info-Micron-Insight:工业 5.0,伟大的思想将殊途同归 1.返回顶部 1. 工业 5.0,伟大的思想将殊途同归 两个头脑比一个好吗?似乎如此,尤其是当其中一个 ...
- Scrapy 中 Request 对象和 Response 对象的各参数及属性介绍
Request 对象 Request构造器方法的参数列表: Request(url [, callback=None, method='GET', headers=None, body=None,co ...
- HDU - 1754 I Hate It (线段树单点修改,求区间最大值)
很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写一个程序,模拟老师的询问.当然,老师有 ...
- yyyyMMdd必须严格遵守大小写规范
c#中ToString("yyyyMMdd") 与ToString("yyyymmdd")区别 string a= DateTime.Now.ToString( ...