公司4:JrVue主题定制
JrVue是我们基于element重新封装的一套组件库;
具体组件使用方法可以mnote->研发小组查看;
这里我们定制了一套主题色, 具体变动如下:
1、主题色变动:
mfront有蓝、紫、金、红四套颜色,此次主题色选红色为默认主题色:
// 1 jiurong default // red
$--color-jr: #EA1C24 !default;
$--color-jr-hover: #C30119 !default;
$--color-jr-click: #990013 !default;
主要变动如下:
原单选多选组件,选中后文字也会变化,现做了修正,不会变色
2、form表单中必填项:
表单中input,select、textarea组件右侧添加红杠标识
----------变动: 2018-11-12新增------------start-
添加一个类名: notNull, 可以自定义input,select、textarea必填项;
栗子:
<el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name" class="notNull">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域1" prop="region" class="notNull">
<el-select v-model="region">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
栗子配图:
----------变动: 2018-11-12新增------------end-
----------变动: 2018-11-15新增------------start-
日期生成器宽度做了适配, 宽度100%;
----------变动: 2018-11-15新增------------end-
3、表单中用到布局时,select组件宽度默认不会占满布局,现在宽度100%自适应了
饿了么计数器组件, 在form表单有更新, 现在是100%适配
4、按钮。按钮组件在原有的基础上添加了三个属性‘jr’‘border-btn’、‘bg-btn’;
'jr'类似class里的基类,添加后按钮圆角会去掉:
‘border-btn’,即'border-button'需配合‘jr’属性一起使用:
<el-button jr border-btn>主要按钮</el-button>
‘bg-btn’,即'background-button'需配合‘jr’属性一起使用
<el-button jr bg-btn>主要按钮</el-button>
----------变动: 2018-11-12新增变动--------start-
为简化组件代码, 这一版去掉了'jr'和'bg-btn'这两个基础属性, 这两个属性的样式改为默认按钮的样式;
‘border-btn'属性样式没有变化, 不需要'jr'基类配合, 可直接使用
border-btn和默认按钮的图栗子:
----------变动: 2018-11-12新增变动------------end-
----------变动: 2018-11-15新增------------start-
新增了两种icon按钮组
1.table里面的icon组:
栗子1-1:
中间<i></i>默认显示一个竖杠分隔符(占10像素宽,可叠加)
<span>
<i class="jr-icon-edit" onClick={e => this.handleEdit(row)}></i>
<i></i>
<i class="jr-icon-delete" onClick={e => this.handleDelete(row)}></i>
</span>
栗子1-1配图:
栗子1-2:
中间<span></span>标签只做分隔占位(占10像素,可叠加)
<span>
<i class="jr-icon-edit" onClick={e => this.handleEdit(row)}></i>
<span></span>
<i class="jr-icon-delete" onClick={e => this.handleDelete(row)}></i>
</span>
栗子1-2配图:
栗子1-3:
多个icon依次添加即可
<span>
<i class="jr-icon-edit" onClick={e => this.handleEdit(row)}></i>
<i></i>
<i class="jr-icon-plus" onClick={e => this.handleDelete(row)}></i>
<i></i>
<i class="jr-icon-delete" onClick={e => this.handleDelete(row)}></i>
</span>
栗子1-3配图:
2.页面右侧的icon组:
页面icon组, 用span.el-icon-group包span标签(或i标签, i标签默认显示一个竖杠分隔符)
栗子2-1:
该icon组的span需要添加一个类名.el-icon-group, 其他与table写法相同, 如需添加提示功能, 参照栗子2-2
<span class="el-icon-group">
<i class="el-icon-plus"></i>
<span></span>
<i class="el-icon-delete"></i>
</span>
栗子2-1配图:
栗子2-2:
该icon组添加了提示功能, 参数配置参见饿了么tips组件其他同上
<span class="el-icon-group">
<el-tooltip class="item" effect="dark" content="添加" placement="bottom">
<i class="el-icon-plus" @click="startAdd" ></i>
</el-tooltip>
<span></span>
<el-tooltip class="item" effect="dark" content="删除" placement="bottom">
<i class="el-icon-delete" @click="deleteAll"></i>
</el-tooltip>
</span>
栗子2-2配图:
3关于饿了么icon与我们项目同步问题
现在饿了么icon没有svg字体文件不能统一生成字体icon, 我这种采用用我们原来自己的svg覆盖饿了么相应字体;
目前先紧急同步了三个常用icon, 后续会陆续添加:
<i class="el-icon-edit" onClick={e => this.handleDelete(row)}></i>
<i class="el-icon-plus" onClick={e => this.handleDelete(row)}></i>
<i class="el-icon-delete" onClick={e => this.handleDelete(row)}></i>
这次改动为过渡版本;
----------变动: 2018-11-15新增------------end-
----------变动: 2018-11-20/21变更------------start-
这一版我们不再覆盖饿了么icon, 重新添加了jr-icon-*常用按钮若干:
<i class="jr-icon-edit"></i> (编辑)
<i class="jr-icon-plus"></i> (添加)
<i class="jr-icon-delete"></i> (删除)
<i class="jr-icon-upload"></i> (上传/导入)
<i class="jr-icon-download"></i> (下载/导出)
<i class="jr-icon-template"></i> (导出j
栗子:
----------变动: 2018-11-20/21变更------------end-
@------------------------------
开发工程: staice-view;
测试分支: mfront 7.1theme
ziChin
@-------------------------------
公司4:JrVue主题定制的更多相关文章
- 公司4:JrVue主题定制-2
页面折叠布局:(折叠按钮.transition动画.git项目池模块分支) 布局组件(template): <el-container> <el-aside> <!-- ...
- 提升组件库通用能力 - NutUI 在线主题定制功能探索
开发背景 NutUI 作为京东风格的组件库,已具备 H5 和多端小程序开发能力.随着业务的不断发展,组件库的应用场景越来越广.在公司内外面临诸如科技.金融.物流等各多个大型团队使用时,单一的京东 AP ...
- 车载导航应用中基于Sketch UI主题定制方案的实现
1.导读 关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类: 内置主题(应用内自定义style) 外部加载方式(资源apk形式.压缩资源.插件等) 其实,针对不同的主题定制实 ...
- Visual Studio中的主题定制变得更加容易
有时Visual Studio的默认主题是不够的.幸运的是,我们刚刚重新设计了创建和导入自定义主题的过程. 导入主题的唯一方法之一是下载旧的Color Theme Editor扩展.如果你足够勇敢地创 ...
- elementUI——主题定制
需求: 设计三套主题色+部分图标更换: 实现方式汇总: 1.传统做法,生成多套css主题包,切换link引入路径切换href实现,参考网站:http://jui.org/: <link id=& ...
- 公司6:JrVue重用布局
JrVue是我们基于element重新封装的一套组件库; 为了提高开发效率, 方便对代码的统一管理和维护, 我们提供了一些统一的页面布局, 以及项目常用的中小型模块 我在master新拉一个分支J ...
- 标准产品+定制开发:专注打造企业OA、智慧政务云平台——山东森普软件,交付率最高的技术型软件公司
一.公司简介山东森普信息技术有限公司(以下简称森普软件)是一家专门致力于移动互联网产品.企业管理软件定制开发的技术型企业.公司总部设在全国五大软件园之一的济南齐鲁软件园.森普SimPro是由Simpl ...
- wordpress 主题开发
https://yusi123.com/3205.html https://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tut ...
- 决定如何开发你的WordPress主题框架
在本系列教程的第一部分,我介绍了不同类型的主题框架并解释了它们是如何工作的. 在你开始建立你的主题框架之前,你需要考虑它是如何工作的,以及它将会被用来做什么,这样你才能从一开始就找到最合适的开发途径. ...
随机推荐
- 【Tomcat】tomcat启动后查看运行时JVM参数
Tomcat优化配置参考http://www.cnblogs.com/qlqwjy/p/8007490.html 1.启动服务后访问localhost,点击Server Status
- android中后一个activity传值给前一个activity的实现
前一个activity跳转到后一个activity设置code: Intent intent=new Intent(MainActivity.this,ActivityTwo.class); star ...
- hdu - 1394 Minimum Inversion Number(线段树水题)
http://acm.hdu.edu.cn/showproblem.php?pid=1394 很基础的线段树. 先查询在更新,如果后面的数比前面的数小肯定会查询到前面已经更新过的值,这时候返回的sum ...
- UVA 116_ Unidirectional TSP
题意: 给定整数矩阵,从第一列的任何一个位置出发,每次可以向右.右上.右下走一个格,将最后一行和第一行看成是邻接的,最终到达最后一列,路径长度为所经过格中的整数之和,求最小路径,答案不唯一,输出字典序 ...
- MongoDB小结27 - 聚合管道【$project】
我们有这样的数据 { "_id" : 1, title: "abcdef", isbn: "6969696969", author: { l ...
- 冲刺Offer - 二叉树的深度
https://www.nowcoder.net/practice/435fb86331474282a3499955f0a41e8b?tpId=13&tqId=11191&tPage= ...
- POJ 3370 Halloween treats(抽屉原理)
Halloween treats Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 6631 Accepted: 2448 ...
- oralce之复杂查询举例
表结构: S(SNO,SNAME) 代表 学号.学生姓名: C(CNO,CNAME,CTEACHER) 代表 课号,课程名称.授课老师 SC(SNO,CNO,SCGRADE) 代表 学号.课号.课程成 ...
- Markdown 语法的简要规则
标题 标题是每篇文章都须要也是最经常使用的格式,在 Markdown 中.假设一段文字被定义为标题,仅仅要在这段文字前加 # 号就可以. # 一级标题 ## 二级标题 ### 三级标题 以此类推,总共 ...
- checkstyle+ant生成checkstyle报告
<?xml version="1.0" encoding="UTF-8" ?> <project name="tibim" ...