说明文档
该组件为项目提供了一些常用的方法,组件,样式。
指令操作
npm/cnpm i
依赖包下载
npm run serve
启动开发环境
npm run build
打包正式环境
npm run test
打包测试环境
组件库说明
公共方法
1、changeDate(time, type) //时间格式化
参数说明:
time:传入的时间
type:格式化后返回的格式
默认:2020-01-01
date2:20200101
dataTime :2020-01-01 01:01:01
month :2020-01
month2 :202001
---后续根据项目需求会加入更多格式---
2、changeNum(num,changeType) //数字格式化
参数说明:
num:传入的数字
changeType:格式化后返回的格式
默认:保留2位小数
tofixed3:保留三位小数
comma :保留2位小数,正数部分添加百分号 //10,000.00
comma3 :保留3位小数,正数部分添加百分号
percent :保留两位添加百分号
---后续根据项目需求会加入更多格式---
3、sortFunc(arr,word,type) //数组对象的排序
参数说明:
arr:传入的数组
word:按照对象中的某个字段排序(字段值为可以比较大小的内容,比如时间或数字)
type:排序规则
默认:正序
任意值:倒序
4、urlSearch(name) //获取路由中的参数
参数说明:
name:参数名
公共样式
仅仅提供一些简单的样式
.twBorder //添加线条
.twBorder-b //添加底部线条
.twEllipsis //文字超过1行后结尾截断并出现...
.twEllipsis2 //文字超过2行
.twEllipsis3 //文字超过3行
.twRadius //圆角弧度5px
.twRadius10 //圆角弧度10px
.twBtnForm //表单按钮样式
.twBtnBasic //基础按钮样式
//flex布局样式
.twFlex
.twFlex-between
.twFlex-around
.twFlexCo
.twFlexCo-between
.twFlexCo-around
......未完待续
公共组件
1、表单
<twForm :formData="data" @getParamsData="func"></twForm>
参数说明:
func://点击表单中的保存按钮后,会在此方法中返回表单所填数据。
data:{
title:'表单名',
id:'表单id',
formList:[//构建表单数据
{name:'放养日期',value:'',valueName:'breedDate',require:true,placeholder:'请输入年限',type:'selectDate'},
{name:'放养品种',showName:'',value:'',valueName:'breedVarietyCode',placeholder:'请选择品种',type:'selectMore',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'}]},
{name:'品种分类',showName:'',value:'',valueName:'varietyClassifyCode',require:true,placeholder:'请选择分类',type:'selectOne',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'}]},
{name:'放养重量',value:'',valueName:'breedWeight',require:true,placeholder:'请输入重量',type:'number',unit:'kg',tofixed:3,blur:true,blurContact:'price',blurResult:'totalMoney',ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
{name:'放养数量',value:'',valueName:'breedNumber',require:true,placeholder:'请输入数量',type:'tel',unit:'尾',blur:true,ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
{name:'放养规格',value:'',valueName:'breedSpecification',require:true,placeholder:'自动计算',type:'number',unit:'克/尾',tofixed:1,readonly:true},
{name:'单价',value:'',valueName:'price',require:true,placeholder:'请输入单价',type:'number',unit:'元/kg',tofixed:2,blur:true,blurContact:'breedWeight',blurResult:'totalMoney'},
{name:'总金额',value:'',valueName:'totalMoney',placeholder:'自动计算',type:'number',unit:'元',readonly:true,tofixed:2},
{name:'备注',value:'',valueName:'remark',type:'textarea',limit:200,placeholder:'请输入备注'},
{name:'模块ID',value:'',valueName:'pkId',isHidden:true},
{name:'放养品种父级Id',value:'',valueName:'breedVarietyParentCode',isHidden:true}
]
}
formList参数说明:
name:label名字。
showName:单选或者多选时,选中后需要展示的文案。
value:传给后台的value值。多选时,value为选中的数组对象
valueName:传给后台的key。
require:true为必填。
type:输入框类型//text,tel,number,selectDate,selectMore,selectOne,textarea。
list:type为selectMore,selectOne时,弹出框的内容。
tofixed:type为number时,小数位数保留X位。
limit:type为textarea时,内容字数限制以及右下角的字数实时展示。
readonly:是否可填。
isHidden:是否隐藏该项。
unit:该项单位。
blur:该字段将会与blurContact中的字段进行相加复制到blurResult字段中。
blurContact:
blurResult:
ggContact://如果blur的这个字段会联动2次加法计算,就要启动该字段,值为[本身的valueName,'关联的另一个字段'],会计算[]中的2个字段并复制给ggResult中的字段中。
ggResult: