elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注“web秀”,让你真正秀起来
前言
经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题。那么,我们怎么把这个功能用到自己项目中呢?其实官方文档也有所说明,这里对其进行更详细,更明确的说明,同时提供简单示例,供大家参考。
ColorPicker 颜色选择器
ColorPicker 颜色选择器,是Element UI 提供的组件,我们可以直接使用。
...
使用也是非常简单,下面我们能通过这个组件,改变全局的主题颜色
Vue + Vuex + Element UI动态全局主题颜色
1、封装一个theme-picker组件
2、解析
监听theme(颜色选择器的值),如果发生变化,通过getThemeCluster函数,计算一系列theme值相关主题颜色。
getCSSString方法,是获取远程(element ui提供)的主题css样式文件。拿回来后,用updateStyle方法,把远程拉下来的样式替换为我们自己重新计算的的颜色。
最后,创建一个style标签,将新的主题样式,写入进去。所有Element UI相关组件主题颜色就会被替换。
但是如果是我们自定义的组件呢?颜色如何处理?
这里我们就用到了vuex + LocalStorage来管理,主题颜色值。
Vuex + LocalStorage动态与Element UI组件无关主题颜色
上面代码种,我们已经将,theme存储了起来,如果有不会vuex + LocalStorage持久化状态管理的小伙伴,可以点击《Vuex+localStorage数据状态持久化》,这里就不做过多的介绍了。
通过commit向store里面存储颜色。
this.$store.commit(types.M_THEME_COLOR, this.theme)
然后通过state获取:
computed: { ...mapState({ themeColor: state => state.commons.themeColor }) },
最后我们页面可以直接使用themeColor
细心的小伙伴是不是发现这里过了一个变量backgroundColor,这个是通过themeColor重新计算的。
backgroundColor () { // 返回某个颜色的三原色 const tintColor = (color) => { let red = parseInt(color.slice(0, 2), 16) let green = parseInt(color.slice(2, 4), 16) let blue = parseInt(color.slice(4, 6), 16) return [red, green, blue] } let color = this.themeColor.replace('#', '') color = tintColor(color) // 转成rgba格式的,并添加透明度 return `rgba(${color[0]}, ${color[1]}, ${color[2]}, .3)` }
这样就搞定了动态主题颜色,是不是很简单了?迫不及待的想让自己的项目也支持动态主题了吧,赶紧自己动手去试试吧。
推荐文章
Vuex是什么?Vuex能做什么?Vuex怎么使用?
Vuex+localStorage数据状态持久化
喜欢小编或者觉得小编文章对你有帮助的,可以点击一波关注哦!同时,要源码的小伙伴可以点击下方“了解更多”。
elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色相关推荐
- Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
一.前言 其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了 一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , ...
- css画表格多级表头,element UI实现动态生成多级表头
一.效果图 二.封装两个组件,分别为DynamicTable.vue和TableColumn.vue,TableColumn.vue主要是使用递归来对表头进行循环生成 DynamicTable.vue ...
- 基于vue-router vuex+Element ui+echarts+axios +mysql的后台管理系统
目录 前言 一.使用HBuilderX新建项目 二.安装依赖 三.文件创建 1.引入插件 2.APP.vue文件 3.注册路由 4.Main.vue文件 5.侧边栏实现 6顶部导航条实现 四.首页制作 ...
- axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载 分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单 对不对? import axios from 'axios'; imp ...
- elementui 上传七牛_用element ui上传图片到七牛踩过的坑
前端上传图片到七牛云的流程 请求后端接口获取上传凭证 请求七牛云地址上传图片到七牛云 上传完毕将获得七牛云返回的图片地址 七牛云地址 说到七牛云地址,奴家真的是一把鼻涕一把泪 刚开始做图片上传的时候, ...
- Element UI 自定义动态换肤(主题)
需求背景:项目需要支持动态换主题,主题色可以随意选择(即用户想用什么颜色的主题就用什么颜色的主题):而element官网给的 自定义主题 只能是项目里写死,无法实现用户动态切换: 方式一:调接口加载C ...
- element ui 表格动态列显示空白bug 修复
在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是 ...
- element UI框架Fr Cover主题插画下载模板V2.0
简介: 这是一款VUE.JS模板,基于element UI开发的一款Fr Cover 2.0插画下载模板,需要您对VUE.JS+node有一定的了解. 模板使用方法: 将源码倒入Hbulder/VS ...
- vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具 编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分 新增 空 {{ drug.name }} 刪除 尚未新增任何資料 總金額:{{ totalMoney } ...
最新文章
- Linux命令——mv
- 近期北京动点软件发现XXX公司盗用我公司WPF项目案例
- C++ Primer 5th笔记(chap 16 模板和泛型编程) 类模板的成员函数
- 面对需求总是被Boss怒改,产品经理该怎么办?
- [react] React v15中怎么处理错误边界?
- 掌握Android中的进程和线程
- idea 检测 重复代码_IDEA关掉重复代码波浪线
- 用到f6的快捷键_简单上手excel秘籍:6大Excel技巧展示+50个常用快捷键!会这些就够了...
- springboot yml对于list列表配置方式
- 深度学习多种模型评估指标介绍 - 附sklearn实现
- 鲁棒控制(棒棒控制原理)
- 倒杨辉三角4行c语言,倒杨辉三角
- 通过PHP保存图片到mysql,如何使用MySQL保存一个图片并且用PHP得到它
- 咸阳无房证明网上办理指南
- HashMap为什么是2倍扩容
- 双11技术总指挥汤兴:今年双11是技术和商业的完美共振
- MiniGui打开GridView控件
- Tita:OKR教练专家的6个OKR实施技巧
- Ract-Native 调出dev menu的命令
- 验证码测试的解决方案