公司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

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