Demo功能:
{{i+1}}. {{api.title}}
版本1.0
文档说明:
{{index+1}} . {{apiList[index].title}}
第三方组件 angular2-chartjs,依赖于 chart.js ,详细参数配置可点击链接查看github文档

示例:

HTML
{{html.chart}}
JS
{{html.chartJS}}
第三方组件:ng2-file-upload
Todo:再看看这个回答,待优化:https://github.com/valor-software/ng2-file-upload/issues/718
第三方组件:jodit-angular
{{html.rich}}
注意:input是自定义的上传图片,用绝对定位添加到富文本上的,所以在使用的时候,若需要用到本地上传图片,需要将富文本组件的父级div设为相对定位。
上传图片JS:
{{html.richJS}}

目前我将富文本初始化写在onResize接口中,可以实现,感觉不是很合理,但暂时没有找到更适合初始化的接口。
第三方组件: ngx-image-cropper
打开本地文件后裁剪后得到的是base64数据,转换成blob可以像普通上传文件那样传给后台
监测本地文件的上传:
{{html.upload}}
使用裁剪组件:
{{html.crop}}
{{html.cropJS}}
侧边和顶部
Todo:用户头像昵称、登入登出;权限设置
第三方组件:ng2-dragula
{{html.drag}}
{{html.dragJS}}
{{html.tooltip}}
tooltip:要在浮框中显示的文本内容
color:背景颜色,可选值为black(黑底白字)和white(白底黑字),默认black
direction:浮框出现的位置,可选值为四个方向:top,bottom,left,right,默认bottom
showAnyway: 若为true,则不管是否超出设定长度都显示,默认false
{{html.modal}}
{{html.modalJS}}
width:number,模态框宽度,默认500px
height:number,模态框高度,默认300px
modalStatus:模态框显示状态,根据这个状态值,判断是否显示模态框组件
bgClose:boolean,当点击遮罩层是否自动关闭
close:当bgClose为true时,需要添加这个函数,以便及时改变当前modalStatus的值(否则可能会出现第二次点击打不开的问题)
      
fixed:n,(n>=0) 保留小数点后n位;
length:n,s.slice(0,n) 截取字符串前n位,若未负数则为后-n位
请求的url都放在apiService中;已添加全局请求的loading(拦截器)
顶部自动消失小提示;Todo:底部的横条提示,alert(确认和取消两种可选按钮,warning,dander,success,default四种默认类型,自定义颜色和可选的自动消失时长)
Todo:耦合性太高,目前需要借助global对象赋值以监测变化,从而重新对组件进行赋值——待改进
标签输入框
HTML
{{html.tag}}
输入参数:
tagList:数组,如:['a', 'b', 'c']
placeholder:占位符,如:添加标签
只封装了tab顶部的切换栏,下面的内容部分不作封装
{{html.tab}}
{{html.tabJS}}
{{html.selectInput}}
keyword:关键词,组件根据输入的值在list中筛选
list:用于筛选的下拉列表,数组元素为对象
name:下拉列表数组中对象的字段名,用于展示给用户的字段
placeholder:占位符
getInputValue:获取联想输入框中的值,返回值为一个对象,其中value为输入框的值,selected为选中的对象
单选框:
{{html.radio}}
radioData:对象数组
radioLabel:对象字段名,用于展示给用户
selectedValue:初始化默认选中值,若要生效,必须设置用于判断的字段名selectedName
selectedName:string,初始化默认选中值的字段名
selectedIndex:number,初始化默认选中值的下标,可为空
radioSize:number,单选框的直径大小,单位px
radioBg:背景色,不设置默认为#fff
radioColor:中间选中点和边框的颜色,不设置则默认为#333
changeRadio:改变选项时通过这个函数获取当前选中的值,返回值为一个对象,item为选中的对象,index为选中的对象在radioData的序号
复选框:
{{html.checkbox}}
复选框组件是单个的,若要和列表联用需要自行使用*ngFor
checkStatus:boolean | number | string, 初始化默认选中状态
checkLabel:描述文本
checkboxColor:'white' | 'black',复选框选中时√的颜色,可选黑色或白色,当有自定义checkIcon这个字段不生效
checkIcon:自定义选中图标,参数值为图标url链接
checkboxBorderColor:复选框边框颜色,默认#fff
checkboxBg:复选框边框颜色,默认#fff
checkboxSize:number,复选框大小,默认20px
checkDisabled:是否可选,当这个值为true为不可选,默认为true
changeCheckStatus:当点击复选框的值时触发函数,返回值为当前复选框的状态值(这个必须添加,手动去改一把状态值,否则只是改变样式,值还是不变)
动画指令:
{{html.animation}}
当前可选值有:'linear-show', 'bounce-show', 'rotate-x-show', 'rotate-y-show', 'rotate-z-show', 'thomas-show',可在指令源码中的styleNode.innerHTML继续添加动画效果,该字段值为CSS样式代码的压缩
数据验证指令:
{{html.validate}}
rules:
{{html.rules}}
分为两种类型的验证,一种是输入时对单个字段进行校验,另一种是在提交时进行校验
validate:在标签上添加该指令
rule:对象数组,每个对象为一条规则;对象有两种类型,一种是根据字段required用于判断是否必填,错误提示语句写在message中;另一种是根据字段validator(函数)自定义规则,函数需要return一个字符串作为错误提示
validateValue:待验证的值
validateType:验证类型,input或submit,默认为input
submit:若验证类型为submit,则可在这个函数中获取到验证结果,返回值为验证结果状态值
validateRules:若验证类型为submit,则需要传入这个验证规则对象,这个对象中的每个属性是对单个字段的校验数组
{{html.search}}
keyword:默认输入的关键词,初始化时不会触发search
search:当输入框内容改变时触发,包括点击右侧清空按钮时也会触发,返回值为当前的输入框的值(清空时值为空字符串)
palceholder:占位符
{{html.multiSelect}}
{{html.multiSelectJS}}
firstName:用于展示给用户的标签字段名 如 province
secondName:用于展示给用户的标签字段名,如 city
thirdName:用于展示给用户的标签字段名,如 area
secondChild:存放第二个数组的属性名,如 cities
thirdChild:存放第三个数组的属性名,如 areas
firstLabel:第一个数组的值的字段名,如 provinceCode
firstValue:初始化第一个数组选中的值
secondLabel:第二个数组的值的字段名,如 cityCode
secondValue:初始化第二个数组选中的值
thirdLabel:第三个数组的值的字段名,如 areaCode
thirdValue:初始化第三个数组选中的值
mouseHide:鼠标离开立即消失
getValue:返回选中的值,数组[this.firstValue, this.secondValue, this.thirdValue]