参考这篇博客https://blog.csdn.net/young_Emily/article/details/78591261做一遍,加上自己的一些理解 思路:通过自己上一篇博客https://www.cnblogs.com/aidixie/p/10309862.html做出多个不同的自定义主题,在不通的主体的css样式前加上不同的class名,在页面跟换不同肤色时,通过改变body上的calss来添加不同的样式. 一.elementui自定义主题更换皮肤 1.1.给不通的主题添加不同类名 在

前言: 今年这大半年我主要负责公司的后台教务管理的开发,这个管理系统目前主要是给公司的内部人员去配置公司的核心项目(例如:熊猫小课)的所有数据,例如课程的配置.课程期数的配置.课程版本的配置.活动的配置.课程安排表.管理员的权限配置.物流的管理.退款管理.学员咨询管理等功能.因为一开始这个教务系统的原型设计就是基于element-ui 1.4.13的版本设计的,前端一开始为了和设计稿给的原型保持一致,项目中也是基于element-ui 1.4.13在开发,现在这个版本官方已经停止维护了,我们曾经

前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是Vue CLI 3 + element-ui + 多个二次封装的组件.最终想要的是 element-ui 这种感觉的,很多组件可以在不同项目中复用. 安装依赖 首先用Vue CLI 3来初始化项目 yarn global add @vue/cli vue create qiyun-el-ui vue

基于ElementUI,设置流体高度时,固定列与底部有间隙问题,如下图: 解决办法: 1.fixed流体的高度设置为100%     2.将fixed的滚动内容的最大高度设置为none,bottom为去除滚动条高度的值. 如自定义滚动条的高度为8px,则代码如下: .el-table{ .el-table__fixed, .el-table__fixed-right { height: 100% !important; } &.el-table--fluid-height { &.el-t

文章已收录到 github,欢迎 Watch 和 Star. 简介 在了解 Element 源码架构 的基础上,接下来我们基于 element-ui 为团队打造自己的组件库. 主题配置 基础组件库在 UI 结构上差异很小,一般只是在主题色上会有较大差异,毕竟每个团队都有了 UI 风格.比如,我们团队的 UI 设计稿其实是基于 Ant Design 来出的,而组件库是基于 Element-UI 来开发,即使是这种情况,对组件本身的改动也很少.所以,基于开源库打造团队自己的组件库时,主题配置就很重要

前言 web应用程序,切换主题,给其换肤,是一个比较常见的需求. 如何能快速的切换主题色?(只有固定的一种皮肤) 如果又想把主题色切换为以前的呢?(有多种可切换的皮肤) 该以何种方式编写标签的css属性? 快速切换主题这个需求,它考验了项目的CSS代码,是否具有可维护性.可扩展性. css要如何编写,才能达到这两点呢,我还在研究学习当中,可以参考在大型项目中组织CSS. 本来,此文想写这个的,发现道行不够(┬＿┬),我还是写如何实现的,比较好. 想要换主色调,其实就是换一种风格样式,最终都是换c

方便基础业务开发封装的一套组件,基于vue2.5.x和element-ui,可以通过配置自动生成表格展示,表格新增.编辑功能.分页.筛选项.自定义显示表格数据等功能. 先上演示图片 ---------------------------------- 筛选部分 ----------------------------------------------------------- 自定义按钮部分 -------------------------------- 表格主体部分 -----------

一.项目链接 GitHub 地址: https://github.com/imxiaoer/ElementUIAdmin 项目演示地址:https://imxiaoer.github.io/ElementUIAdmin/dist/index 二.项目依赖   1. 数据请求      "axios": "^0.18.0", 2. 图表控件    "echarts": "^4.2.0-rc.2", 3. 富文本编辑器   &qu

这周对公司的内容使用vue进行重构,所以记录一下开始项目的过程 下载elementUI: 项目文件夹中在命令行中输入:npm install elementui -s 下载完成后在 main.js 中加入以下内容: import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 需要注意的是,样式文件需要单独引入 使用elementui的布局的组件组成页面

最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效果图预览: 首先是页面布局,当然也可以使用框架自带的table布局,这里博主自己用的flex布局,这样后面更利于增删改查其他功能   接下来是数据结构,可以跟后端商议,但是字段indeterminate(显示不确定状态~符号),selected(CheckBox选中状态)一定要让后端加入到data中

由于前端项目使用的是Vue-cli3.0 + TypeScript的架构,所以该组件也是基于ts语法封装的,组件的完整代码如下: <template> <div id="myImport"> <el-button type="primary" plain @click="importDialogVisible = true">导入</el-button> <!-- 导入弹窗 --> &l

大家在做后台管理系统的时候,写的最多的可能就是表格页面了,一般分三部分:搜索功能区.表格内容区和分页器区.一般这些功能都是使用第三方组件库实现,比如说element-ui,或者vuetify.这两个组件库都各有各的优点,但就table组件来说,我还是比较喜欢vuetify的实现,不用手写一个个column,只要传入headers的配置数组就行,甚至分页器都内置在了table组件里,用起来十分方便.有兴趣可以看看:vuetify data table. 上面是一个经典的用element-ui开发的

<template> <section class="ces-table-page"> <!-- 表格操作按钮 --> <section class="ces-handle" v-if='isHandle'> <el-button v-for='item in tableHandles' :key='item.label' :size="size || item.size" :type=&qu

v-dialogDrag: 弹窗拖拽 使用: <el-dialog XXX v-dialogDrag></el-dialog> Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') dia

最终效果如下 实现要求: 如果输入的内容不是非负整数,那么提示报错,并且将值变为输入前的内容: 如果输入正确,则当输入的内容发生改变并且失去焦点以后,触发事件,重新获取列表: 实现思路 使用原生的input框,更容易控制: 当输入框获取焦点以后,保存原始值: 监听回车点击事件与change事件,判断输入的值是否满足条件: 如果满足条件,那么就根据输入的内容更新内容,并且重新获取列表内容: 如果不满足条件,报错,同时通过操作dom,将input的value值进行改变: html部分 1. 代码部分

%)%)%%%))) .) .) .) .) .) .) .) .) .) .) .) .) .) .) .) .% %% %deg);}

1.效果图 2.代码 <template> <div style=" overflow: hidden;"> <el-row> <el-col :span="18" :offset="3"> <div id="dataShow" onmouseover="this.style.overflow='overlay'" onmouseout="th

绑定一个 [12.34,-45.67] (东经西经,南纬北纬 正负表示) 形式的经纬度数组,能够按度分秒进行编辑,效果如下所示,点击东经,北纬可切换. 经纬度的 度转度分秒 能够获取度分秒格式数据 Coordinates组件实现 Coordinates.vue 模板:一个span显示东经西经,三个输入框输入度分秒 <template> <div class="coordinates"> <!-- 经度 --> <div class="

Major是一款基于jekyll的皮肤,没有用hexo,原因是换机器后无法更新博客,但是可以用U盘考环境.总之很麻烦!折腾纠结好久,还是用jekyll!不用发布直接push文章即可,方便快捷.用的放心舒心-- 皮肤地址:https://github.com/Cyclone77/Major 演示地址: https://cyclone77.github.io 欢迎Star,Fork! 废话不多,先上图: 为博客园打抱不平 :以前看到很多园子里的朋友说,博客园样式好丑,对移动端还不兼容等等!这里就给博

之前的人皮渲染相关 前篇1:unity3d Human skin real time rendering 真实模拟人皮实时渲染 前篇2:unity3d Human skin real time rendering plus 真实模拟人皮实时渲染 plus篇 SSS:Unity3d shader之次表面散射(Subsurface Scattering) PBR:Unity3d 基于物理渲染Physically-Based Rendering之specular BRDF Screen-Space P

范例文件 mobile-skinning-part3 在关于创建Flex移动皮肤系列文章的第二部分里,我们讨论了屏幕密度(DPI)对组件皮肤以及移动应用布局所带来的影响. 我还展示了如何使用缩放应用,特定密度的位图,以及CSS元媒介查询以调整和适应多种DPI值. 除了屏幕尺寸,屏幕密度以及外形差异以外,Flex移动应用开发者必须在着重于各个平台之间的不同点. 除了Android系统以外,Flex4.5.1以及Flash Builder4.5.1还支持两个目标为Flex Mobile项目的平台:苹