首先要有一个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中的使用的更多相关文章

  1. Element ui tree结合Vue使用遇到的一些问题(一)

    下图是一个后台管理系统,展示的是角色列表 当我点击编辑的时候,弹出一个模态框,如下图 功能需求:点击编辑按钮,弹出模态框,选择权限那块,默认选中当前角色拥有的权限. 问题:第一次点击编辑按钮时,不会选 ...

  2. Element ui 2.8版本中的table树不能默认全展开解决方法

    方案一:这个方案有问题 <el-table ref="tableTreeRef" :data="tableDate" ...... </el-tab ...

  3. element ui step组件在另一侧加时间轴显示

    这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

  4. 🎊 Element UI 新春快报

    新年好,Element UI 开发团队给各位支持我们的开发者们拜个晚年,祝大家在新的一年里工作没 bug, 天天不加班. 在过去一年里,Element UI 团队在稳定维护 Vue 2.x 版本的同时 ...

  5. element UI排坑记(一)：判断tabs组件是否切换

    之所以将这个问题列在排坑记之中,是因为官方组件的一个属性颇有些隐蔽,这个问题曾经折腾了本人较多时间,始终思维固着,且使用搜索引擎也不容易搜索到答案,故记之.然而实际解决却是相当简单的. 一.问题描述 ...

  6. vue中的swiper element ui

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 很多同学问,怎么把swiper引入到vue的脚手架里去,之前的一篇博客有提到怎么引入,但是后来感觉不怎么好,还是用一些v ...

  7. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  8. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  9. 如何在 Vite 中使用 Element UI + Vue 3

    在上篇文章<2021新年 Vue3.0 + Element UI 尝鲜小记>里,我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目,而 Vue CLI 实际 ...

随机推荐

  1. WPF无边框移动窗体

    WPF无边框移动窗体,先在<Window>里添加 MouseLeftButtonDown=”Window_MouseLeftButtonDown” 然后导航到事件,在事件里添加 if (e ...

  2. 关于EF ORM 框架的使用问题

    1.无法更新 EntitySet“System_UserInfo20140218001”,因为它有一个 DefiningQuery,而 <ModificationFunctionMapping& ...

  3. Android零基础入门第83节：Activity间数据传递方法汇总

    在Activity间传递的数据一般比较简单,但是有时候实际开发中也会传一些比较复杂的数据,本节一起来学习更多Activity间数据的传递. 一.常用数据类型 在前面几节我们只学习了一些常用类型的数据传 ...

  4. QT运行cmd指令（两种办法：QProcess.start然后waitForFinished，运行cmd /c命令）

    QProcess p(); p.start("route");//写入要运行的指令即可 p.waitForStarted(); p.waitForFinished(); qDebu ...

  5. DIOCP3 DEMO的编译（去掉VCL前缀）

    总有些朋友问我,关于DEMO编译的一些问题,每次都回答大概都差不多,我想还是写篇说明书给大家,关于DEMO编译的步骤. [环境设定] 1.将DIOCP3\source路径添加到Delphi的搜索路径, ...

  6. c++类运算符重载遇到的函数形参问题

    class A { public: A(int arg1, int arg2); ~A(); A &operator = ( A &other); A operator + ( A & ...

  7. uni-app $refs的基本用法

    $refs的基本用法 一个对象(Object),持有注册过 ref 特性 的所有 DOM 元素和组件实例. <template> <view class="containe ...

  8. SpringBoot从入门到精通二(SpringBoot整合myBatis的两种方式)

    前言 通过上一章的学习,我们已经对SpringBoot有简单的入门,接下来我们深入学习一下SpringBoot,我们知道任何一个网站的数据大多数都是动态的,也就是说数据是从数据库提取出来的,而非静态数 ...

  9. git push 时 failed to push some refs 的解决方案

    我们在利用 GIt 上传代码的时候,往往会遇到这样一个问题,导致我们的代码没有办法正常上传到仓库中 造成这个问题的原因其实很简单,就是因为远程仓库和本地库不一致. 基于这样的一个问题,解决办法自然也就 ...

  10. linux 安装 websocketd

    1.下载 wget https://github.com/joewalnes/websocketd/releases/download/v0.3.0/websocketd-0.3.0-linux_am ...