首页 > 其他分享 >自定义elementUI皮肤、色系、主题、主色调

自定义elementUI皮肤、色系、主题、主色调

时间:2022-12-27 17:00:34浏览次数:70  
标签:Vue 自定义 elementUI 主色调 element theme ui import css


​Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库


https://element.eleme.cn/#/zh-CN/theme​​先打开上面的地址

自定义elementUI皮肤、色系、主题、主色调_elementUI Skin

自定义elementUI皮肤、色系、主题、主色调_elementUI Skin_02

 

自定义elementUI皮肤、色系、主题、主色调_elementUI色系_03

 

自定义elementUI皮肤、色系、主题、主色调_elementUI皮肤_04

 

自定义elementUI皮肤、色系、主题、主色调_elementUI色系_05

点击下载

自定义elementUI皮肤、色系、主题、主色调_elementUI皮肤_06

 

自定义elementUI皮肤、色系、主题、主色调_elementUI主色调_07

复制“theme”文件夹到src/css/下面

自定义elementUI皮肤、色系、主题、主色调_elementUI主题_08

 在main.js里面加入

...

//【第三方插件】----------------------------------------------------------------
//引入饿了么UI框架【安装方法】cnpm i element-ui -S
import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import '../css/theme/index.css';//这句话是重点
Vue.use(ElementUI);

...

 然后运行查看就发现按钮、复选框都变成了新的主题主色调了

自定义elementUI皮肤、色系、主题、主色调_elementUI皮肤_09

你学废了吗?

 

 

 

 

 

标签:Vue,自定义,elementUI,主色调,element,theme,ui,import,css
From: https://blog.51cto.com/u_15920212/5973020

相关文章

  • Vue按需引入注册UI以及自定义组件的封装
    1.单文件global注册自定义组件的封装importAfrom"../view/A.vue";importBfrom"../view/B.vue";constcomponents={A,B};exportdefault{install(Vue){......
  • 如何自定义小程序页面分享?
    步骤分解界面设置选中页面点击页面右侧图标点击界面设置设置值这样就可以实现自定义小程序页面分享了。......
  • Hive 自定义函数
    Hive自带了一些函数,比如:max/min等,但是数量有限,自己可以通过自定义UDF来方便的扩展。当Hive提供的内置函数无法满足你的业务处理需要时,此时就可以考虑使用用户自定义函数(UD......
  • Java 自定义注解校验字段唯一性
    业务场景在项目中,某些情景下我们需要验证编码是否重复,账号是否重复,身份证号是否重复等...那么有没有办法可以解决这类似的重复代码量呢?我们可以通过自定义注解校验的方......
  • 第三节:剖析自定义显示列、显示顺序、Excel文件流形式的导出方案
    一.        二.        三.         !作       者:Yaopengfei(姚鹏飞)博客地址:http://www.cnblog......
  • Timeline - 自定义轨道
    Playable轨道和自定义轨道的区别1)Playable轨道中,自定义PlayableBehaviour的上一级只能是Playable。自定义轨道中,上一级是我们自定义的Playable2) 自定义轨道可以直......
  • WPF自定义MessageBox消息弹窗
    摘要在实际项目开发过程中,为了使其界面风格统一,恰好第三方UI库不满足又或是系统自带的又太过于简陋,那就撸起袖子肝一个自定义的出来吧!示例代码Tips:因都是基础代码,没什么......
  • elementui|dropdown|下拉菜单作为模态框使用
    elementui|dropdown|下拉菜单作为模态框使用背景场景:下拉菜单作为模态框使用:操作:下拉菜单设置触发条件点击展示/隐藏:trigger="click"目的:点击取消关闭下拉框遇到的......
  • MapReduce实战之过滤日志及自定义日志输出路径案例(自定义OutputFormat)
    1)需求      过滤输入的log日志中是否包含atguigu      (1)包含atguigu的网站输出到e:/atguigu.log      (2)不包含atguigu的网站输出到e:/other.log2)输入......
  • Azure ARM (24) 自定义Azure Policy
    《WindowsAzurePlatform系列文章目录》 我们可以自定义policy,来符合公司的IT策略。我们这里演示的场景是,增加一个自定义policy,需要用户在创建vnet,或者......