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主题定制的更多相关文章

  1. 公司4:JrVue主题定制-2

    页面折叠布局:(折叠按钮.transition动画.git项目池模块分支) 布局组件(template): <el-container> <el-aside> <!-- ...

  2. 提升组件库通用能力 - NutUI 在线主题定制功能探索

    开发背景 NutUI 作为京东风格的组件库,已具备 H5 和多端小程序开发能力.随着业务的不断发展,组件库的应用场景越来越广.在公司内外面临诸如科技.金融.物流等各多个大型团队使用时,单一的京东 AP ...

  3. 车载导航应用中基于Sketch UI主题定制方案的实现

    1.导读 关于应用的主题定制,相信大家或多或少都有接触,基本上,实现思路可以分为两类: 内置主题(应用内自定义style) 外部加载方式(资源apk形式.压缩资源.插件等) 其实,针对不同的主题定制实 ...

  4. Visual Studio中的主题定制变得更加容易

    有时Visual Studio的默认主题是不够的.幸运的是,我们刚刚重新设计了创建和导入自定义主题的过程. 导入主题的唯一方法之一是下载旧的Color Theme Editor扩展.如果你足够勇敢地创 ...

  5. elementUI——主题定制

    需求: 设计三套主题色+部分图标更换: 实现方式汇总: 1.传统做法,生成多套css主题包,切换link引入路径切换href实现,参考网站:http://jui.org/: <link id=& ...

  6. 公司6:JrVue重用布局

    JrVue是我们基于element重新封装的一套组件库;  为了提高开发效率, 方便对代码的统一管理和维护,  我们提供了一些统一的页面布局, 以及项目常用的中小型模块 我在master新拉一个分支J ...

  7. 标准产品+定制开发:专注打造企业OA、智慧政务云平台——山东森普软件,交付率最高的技术型软件公司

    一.公司简介山东森普信息技术有限公司(以下简称森普软件)是一家专门致力于移动互联网产品.企业管理软件定制开发的技术型企业.公司总部设在全国五大软件园之一的济南齐鲁软件园.森普SimPro是由Simpl ...

  8. wordpress 主题开发

    https://yusi123.com/3205.html https://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tut ...

  9. 决定如何开发你的WordPress主题框架

    在本系列教程的第一部分,我介绍了不同类型的主题框架并解释了它们是如何工作的. 在你开始建立你的主题框架之前,你需要考虑它是如何工作的,以及它将会被用来做什么,这样你才能从一开始就找到最合适的开发途径. ...

随机推荐

  1. 【Tomcat】tomcat启动后查看运行时JVM参数

    Tomcat优化配置参考http://www.cnblogs.com/qlqwjy/p/8007490.html 1.启动服务后访问localhost,点击Server Status

  2. android中后一个activity传值给前一个activity的实现

    前一个activity跳转到后一个activity设置code: Intent intent=new Intent(MainActivity.this,ActivityTwo.class); star ...

  3. hdu - 1394 Minimum Inversion Number(线段树水题)

    http://acm.hdu.edu.cn/showproblem.php?pid=1394 很基础的线段树. 先查询在更新,如果后面的数比前面的数小肯定会查询到前面已经更新过的值,这时候返回的sum ...

  4. UVA 116_ Unidirectional TSP

    题意: 给定整数矩阵,从第一列的任何一个位置出发,每次可以向右.右上.右下走一个格,将最后一行和第一行看成是邻接的,最终到达最后一列,路径长度为所经过格中的整数之和,求最小路径,答案不唯一,输出字典序 ...

  5. MongoDB小结27 - 聚合管道【$project】

    我们有这样的数据 { "_id" : 1, title: "abcdef", isbn: "6969696969", author: { l ...

  6. 冲刺Offer - 二叉树的深度

    https://www.nowcoder.net/practice/435fb86331474282a3499955f0a41e8b?tpId=13&tqId=11191&tPage= ...

  7. POJ 3370 Halloween treats(抽屉原理)

    Halloween treats Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6631   Accepted: 2448 ...

  8. oralce之复杂查询举例

    表结构: S(SNO,SNAME) 代表 学号.学生姓名: C(CNO,CNAME,CTEACHER) 代表 课号,课程名称.授课老师 SC(SNO,CNO,SCGRADE) 代表 学号.课号.课程成 ...

  9. Markdown 语法的简要规则

    标题 标题是每篇文章都须要也是最经常使用的格式,在 Markdown 中.假设一段文字被定义为标题,仅仅要在这段文字前加 # 号就可以. # 一级标题 ## 二级标题 ### 三级标题 以此类推,总共 ...

  10. checkstyle+ant生成checkstyle报告

    <?xml version="1.0" encoding="UTF-8" ?> <project name="tibim" ...