公司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必填项;

栗子: 

 

  class="notNull">

    

  

 

  class="notNull">

    

    

      

    

  

 

栗子配图: 

 ----------变动: 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’属性一起使用：

主要按钮

‘bg-btn’,即'background-button'需配合‘jr’属性一起使用

主要按钮

 ----------变动: 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: 

中间默认显示一个竖杠分隔符(占10像素宽,可叠加)

     this.handleEdit(row)}>

    

     this.handleDelete(row)}>

 栗子1-1配图:

 栗子1-2:

中间标签只做分隔占位(占10像素,可叠加)

     this.handleEdit(row)}>

    

     this.handleDelete(row)}>

 栗子1-2配图:

 栗子1-3:

 多个icon依次添加即可

     this.handleEdit(row)}>

    

     this.handleDelete(row)}>

    

     this.handleDelete(row)}>

 栗子1-3配图:

2.页面右侧的icon组:

页面icon组, 用span.el-icon-group包span标签(或i标签, i标签默认显示一个竖杠分隔符)

 栗子2-1:

该icon组的span需要添加一个类名.el-icon-group, 其他与table写法相同, 如需添加提示功能, 参照栗子2-2

    

    

    

 栗子2-1配图:

 栗子2-2:

该icon组添加了提示功能, 参数配置参见饿了么tips组件其他同上

    

        

    

   

   

      

   

 栗子2-2配图:

3关于饿了么icon与我们项目同步问题

现在饿了么icon没有svg字体文件不能统一生成字体icon, 我这种采用用我们原来自己的svg覆盖饿了么相应字体;

目前先紧急同步了三个常用icon, 后续会陆续添加: 

el-icon-edit" onClick={e => this.handleDelete(row)}>

el-icon-plus" onClick={e => this.handleDelete(row)}>

el-icon-delete" onClick={e => this.handleDelete(row)}>

这次改动为过渡版本;

 ----------变动: 2018-11-15新增------------end-

 ----------变动: 2018-11-20/21变更------------start-

这一版我们不再覆盖饿了么icon, 重新添加了jr-icon-*常用按钮若干:

-icon-edit"> (编辑)

-icon-plus"> (添加)

-icon-delete"> (删除)

-icon-upload"> (上传/导入)

-icon-download"> (下载/导出)

-icon-template"> (导出j

栗子: 

 ----------变动: 2018-11-20/21变更------------end-

 

 

 

 

 

@------------------------------

开发工程: staice-view;

测试分支: mfront 7.1theme

ziChin

@-------------------------------

转载于:https://www.cnblogs.com/ziChin/p/10431249.html