Element ui colorpicker在Vue中的使用
首先要有一个color-picker组件
<el-color-picker v-model="headcolor"></el-color-picker>
在data里面
data() { return {
headcolor: ’ #278add ’ //这里可以选择一个默认的颜色
} }
然后在你想要改变颜色的地方用v-bind绑定就好了,例如:
<el-header class="header" style="height:50px;" :style="{background:headcolor}">
这里的:style 还可以是:class
这样就可以动态改变主题颜色了,其他的用法可以参考官方例子:https://element.eleme.io/#/zh-CN/component/color-picker
效果如下:
Element ui colorpicker在Vue中的使用的更多相关文章
- Element ui tree结合Vue使用遇到的一些问题(一)
下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...
- Element ui 2.8版本中的table树不能默认全展开解决方法
方案一:这个方案有问题 <el-table ref="tableTreeRef" :data="tableDate" ...... </el-tab ...
- element ui step组件在另一侧加时间轴显示
这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...
- 🎊 Element UI 新春快报
新年好,Element UI 开发团队给各位支持我们的开发者们拜个晚年,祝大家在新的一年里工作没 bug, 天天不加班. 在过去一年里,Element UI 团队在稳定维护 Vue 2.x 版本的同时 ...
- element UI排坑记(一):判断tabs组件是否切换
之所以将这个问题列在排坑记之中,是因为官方组件的一个属性颇有些隐蔽,这个问题曾经折腾了本人较多时间,始终思维固着,且使用搜索引擎也不容易搜索到答案,故记之.然而实际解决却是相当简单的. 一.问题描述 ...
- vue中的swiper element ui
欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
- VUE -- 对 Element UI table中数据进行二次处理
时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...
- 如何在 Vite 中使用 Element UI + Vue 3
在上篇文章<2021新年 Vue3.0 + Element UI 尝鲜小记>里,我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目,而 Vue CLI 实际 ...
随机推荐
- 十七 bootstrap-table tableExport 导出xlsx格式表格
原文:十七 bootstrap-table tableExport 导出xlsx格式表格 在[十六.bootstrap-table javascript导出数据]中,打开导出的表格时,总会弹出一个提示 ...
- C#如何使用PythonTuple类型
示例代码: new PythonTuple(new[] { 1, 2, 3 }); PythonTuple myTuple = PythonOps.MakeTuple(new object[] { 1 ...
- 使用scratchbox2建立交叉编译环境
使用scratchbox2建立交叉编译环境,使交叉编译不再烦人..... os:ubuntu 12.04.4 x64 1. 安装相关工具sudo apt-get install debootstrap ...
- 利用BLCR加速android的启动(zygote加入checkpoint支持)
目前基于android4.2.2基线代码的blcr扩展,编译和启动是没有问题了,但是一重启就挂了. 弄这个有段时间了,很纠结,没有个可靠的结果,但是研究到现在,又舍不得放弃. 我想除了shuaiwen ...
- CSS3 GENERATOR可以同时为一个元素完成border-radius、box-shadow、gradient和opacity多项属性的设置
CSS3 GENERATOR可以同时为一个元素完成border-radius.box-shadow.gradient和opacity多项属性的设置 CSS3 GENERATOR 彩蛋爆料直击现场 CS ...
- Z Order of Controls in Delphi FireMonkey(Tom Yu的博客)
Get and set the Z Order of controls at runtime in Delphi FireMonkey. This is a follow on to my earli ...
- 以太网,IP,TCP,UDP数据包分析(此文言简意赅,一遍看不懂的话,耐心的看个10遍就懂了,感谢作者无私奉献)
1.ISO开放系统有以下几层: 7 应用层 6 表示层 5 会话层 4 传输层 3 网络层 2 数据链路层 1 物理层 2.TCP/IP 网络协议栈分为应用层(Application).传输层(Tra ...
- [转]深入了解iPad上的MouseEvent
iPad上没有鼠标,所以手指在触发触摸事件(TouchEvent)的时候,系统也会产生出模拟的鼠标事件(MouseEvent). 这对于普通网页的浏览需求而言,基本可以做到与PC端浏览器无明 ...
- SpringBoot中资源初始化加载的几种方式(看这一片就够了)
一.问题 在平时的业务模块开发过程中,难免会需要做一些全局的任务.缓存.线程等等的初始化工作,那么如何解决这个问题呢?方法有多种,但具体又要怎么选择呢? 二.资源初始化 1.既然要做资源的初始化,那么 ...
- spring 5.x 系列第4篇 —— spring AOP (代码配置方式)
文章目录 一.说明 1.1 项目结构说明 1.2 依赖说明 二.spring aop 2.1 创建待切入接口及其实现类 2.2 创建自定义切面类 2.3 配置切面 2.4 测试切面 2.5 切面执行顺 ...