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
@-------------------------------