fmc-ui v0.0.292

fmc-ui

fmc ui 6.0-std

使用fmc-ui插件

自己电脑上修改源为fmc的npm源（优先从fmc仓库获取插件，其次从淘宝镜像获取插件）： npm config set registry http://192.168.200.17:8081/repository/nodejs-group/ 在需要使用插件项目的package.json中修改：

"dependencies": {
    "fmc-ui": "^1.0.0"
}

引入vue组件并使用

// main.js中添加
// 在import的时候会自动载入样式规范
import { fmcDetailContent } from "fmc-ui";
// 按需引入组件，如果不引入任何组件可以不写Vue.use
Vue.component('fmc-detail-content', fmcDetailContent);
// vue文件中直接使用，不需要定义components：
<fmc-detail-content :label='filterP($t("staff.list.orderLevel"))' :labelWidth='120' :value=''></fmc-detail-content>

使用规范样式

class="fmc-blue"

本地测试

cd ${WORKSPACE}/web npm install --registry=http://192.168.200.17:8081/repository/nodejs-group/ npm run dev npm run build

发布fmc-ui插件

npm login –registry=http://192.168.200.17:8081/repository/nodejs-hosted/ 输入账号密码邮箱： fmcnode/密码为公司2楼 FMC@2015/quanqiuyun@fmc-community.com 修改插件代码，然后执行npm run dev看效果，执行npm run build生成插件(注意不要把dist加入.gitignore里面，因为插件需要这部分内容提供给其他项目) 修改fmc-ui项目下package.json中的version小版本号+1 npm publish –registry=http://192.168.200.17:8081/repository/nodejs-hosted/ 发布插件成功后进入该页面查看 http://192.168.200.17:8081/#browse/browse:nodejs-hosted:fmc-ui%2Ffmc-ui-0.0.4.tgz

public class 公共样式

样式定义在src\styles目录下，分类型定义css文件 主题颜色可通过变量使用，在代码中用： color: var(--fmc-primary); 或 backgroud-color: var(--fmc-bg); 等方式使用 具体有哪些颜色规范参考文档：http://192.168.200.17:8090/pages/viewpage.action?pageId=22119009

public components 公共组件

组件定义在 src\components下 按组件名创建文件夹，然后新建vue/js等文件

fmcDetailContent

详情界面的信息展示组件

用法

参数

:label 详情title

:labelWidth title宽度，不传默认100,类型为number

:labelHeigth content内容部分高度,当type为textarea时传入80，类型为number

:value 详情内容

type 当详情页面进行布尔值判断时，传入boolean;

            当详情页面进行普通传值显示时，不传；

            当详情页面需要显示时间时，传入date;

            当详情页面需要显示switch插件时，传入switch;

            当详情页面需要显示图片时，传入image;

            当详情页面需要显示文本域时，传入textarea

链接

http://192.168.200.17:8090/pages/viewpage.action?pageId=22119419

fmcTag

tag标签（比如详情页左上角状态使用）

用法

标签状态

参数

:type 标签类型：link 链接（默认值） safe 安全 warn 警告 danger 危险 void 作废 rgb(a,b,c) 自定义颜色值 :plain 是否朴素标签，填boolean值，如果为真则显示为纯文本样式

fmcDatePicker

时间选择器组件

用法

<fmc-date-picker :type="'date'" :value='wrokFrom.fields.entryDate' @getDate="(val) => (wrokFrom.fields.entryDate = val)"> 或 <fmc-date-picker :type="'date'" v-model='wrokFrom.fields.entryDate' @getDate="(val) => (wrokFrom.fields.entryDate = val)">

参数

:value和v-model 时间绑定值(String, Number, Date) :type 时间类型，不传默认类型是date(String) @getDate 子传父的回调，修改当前绑定的值

fmcTooltip

文字提示组件

用法

或

参数

:value和v-model 绑定值(String)

fmcBreadcrumb

面包屑（每个模块的Home.vue中使用）

用法

参数

:separator 分隔符，默认是'/',可选参数 :nav2nd 二级导航名称（最左边显示）,可选参数 :nav3rd 三级导航名称（中间显示）,可选参数 :nav4th 四级导航名称（最右边显示）,可选参数

组件定义规范

• （不需要修改组件中的实现，只需要扩展或改样式）优先使用components中组件嵌套方法实现。如fmcSelectOption组件
• （需要修改组件中的某些实现逻辑）组件嵌套无法解决的优先使用components中组件继承方法实现：template拷贝修改，其他的按需修改，不需要的可以不填写。如fmcSelect组件
• （需要修改组件中嵌套的其他组件的某些逻辑）组件继承也无法解决的最后才选择使用static文件夹中重写elementUI组件实现。如tabs组件：除了要修改tabs.vue还需要修改tab-bar.vue，tabs本身做了3层组件嵌套，无法通过组件继承实现，所以才使用static 一定要填写完善的注释，在什么地方替换了element什么代码，添加如下格式的注释内容： 网页中注释：props添加属性： // FMC-Changed 新增label属性 data中添加字段： // FMC-Changed 新增 selectSizeClass 字段 mounted等实现中修改代码段（需要有开始和结束声明）： // FMC-Changed 从这里开始改到代码区块结束为新增的内容，原elementUI中不存在 // FMC-ChangeEND

fmcPhone

phone手机号（常用于表格中）

用法

参数

:value 手机号（文本/数值） :type 类型：readable 易读的（默认值） 前三位 中间四位 后面四位 * 加密中间的四位 normal 正常显示 - 易读的并且空格替换为- :color 文本颜色：text-gray 正文色（默认值） link 链接 safe 安全 warn 警告 danger 危险 void 作废

fmcNumber

number数值组件（常用于表格中的金额、提示中的数字标签）

用法

参数

:value 数值（数值） :reservedDecimalPlace 保留几位小数（type=money时默认为2位，其他默认不设置） :prefix 前缀（默认空，type=tag时默认为一个空格） :suffix 后缀（默认空，type=tag时默认为一个空格） :type 类型：money 金额（默认值，一个保留2位默认的数值，右对齐需要外部实现） tag 一个标签数字，通常用于显示在提示中，搭配color颜色用于显示数值标签 number 正常显示数值 :color 文本颜色：text-gray 正文色（默认值） link 链接 safe 安全 warn 警告 danger 危险 void 作废