0.0.1 • Published 4 years ago
twcomps v0.0.1
说明文档
该组件为项目提供了一些常用的方法，组件，样式。指令操作
npm/cnpm i
依赖包下载
npm run serve
启动开发环境
npm run build
打包正式环境
npm run test
打包测试环境组件库说明
公共方法
1、changeDate(time, type) //时间格式化
参数说明：
time:传入的时间
type:格式化后返回的格式
默认：2020-01-01
date2：20200101
dateStr：2020年01月01日
month ：2020-01
month2 ：202001
monthStr : 2020年01月
year : 2020
yearStr:2020年
dataTime ：2020-01-01 01:01:01
before : 原始的数据格式
---后续根据项目需求会加入更多格式---
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：参数名公共样式
1、字体
导航文字： .twFontNav
标题文字： .twFontTitle
主要文字： .twFontMain
次要文字： .twFontMinor
辅助文字： .twFontNote2、主题色
（1）用于移动端的蓝色
蓝色字体： .twMoFoBlue
可跳转字体: .twMoFontPoint
按钮: .twBtnMo
显示/禁用按钮: .twBtnMo .twMoBgRead
（2）用于PC端的蓝色
蓝色字体： .twPcFoBlue
可跳转字体: .twPcFontPoint
按钮: .twBtnPc
显示/禁用按钮: .twBtnPc .twPcBgRead
（3）主题红色
蓝色字体： .twRedFoRed
可跳转字体: .twRedFontPoint
按钮: .twBtnRed
显示/禁用按钮: .twBtnRed .twRedBgRead
（4）辅助色
警告：.twWarCo .twWarBg
成功: .twSucCo .twSucBg
危险：.twDanCo .twDanBg
信息：.twInfCo .twInfBg
（5）中间色
不可操作背景色：.twDisColor
页面背景色：.twBgColor
3、一些简单的样式
.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、表单
一、主要用于移动端(基于mint-ui),推荐使用第二种表单控件。
<twForm :formData="data" @getParamsData="func" @formVerify="formVerify" ref="childForm" @gotoPage='gotoPage'></twForm>
参数说明：
func：点击表单中的保存按钮后，会在此方法中返回表单所填数据。
gotoPage:当组件类型为selectPage时，设置该方法，返回一个回调函数，用于后续自己处理逻辑。
formVerify：（非必要）每当填写某一项表单后，被动触发验证一次表单所有必填
字段是否填
写。如果都填写完成，则会在此方法中返回一个对象。
obj = {
currState: true,//表示必填已填完（此方法中必为true）。
mention: "",//该字段为必填字段没有填写时，返回的该项label文案。
（此方法中，该字段必定为空。主要用于主动触发校验方法时，返回的值。）
sendData:{}//可用于发起请求的表单数据。
}
ref：（非必填）在父组件自定义事件中，通过调用组件内部方法：this.$refs.childForm.verifyReq()
，实现主动触发调用表单验证必填字段的方法。返回对象与formVerify中的返回对象一致。
data:{
title:'',//为空时，则没有标题。（表单独占一页时，强烈建议title不为空！）
hideSaveBtn:false,//（可选项，默认false）
isLocalShow:false,//（可选项，默认false）是否以块级表单显示，默认占屏100vh。
id:'formId',//此ID为表单ID，也可以用ref方式获取该dom节点。
formList:[//构建表单数据
{name:'放养日期',value:'',valueName:'breedDate',require:true,placeholder:'请输入年限',type:'selectDate',timeType:'',startDate:'2018-01-01',endDate:'2021-01-01'},
{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。
timeType：type为selectDate时，timeType选择时间的类型（year,month,不填为默认年月日的格式）。
startDate：type为selectDate时，设置时间控件的起始时间。
endtDate：type为selectDate时，设置时间控件的结束时间。
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：
额外方法：
//在组件外主动触发，获取必填验证的表单数据,在getSaveData中返回表单数据
1、this.$refs.childForm.saveData();
//在组件外主动触发，获取没有必填验证的表单数据,在getSaveData中返回表单数据
2、this.$refs.childForm.getCurrData();
二、主要用于移动端(基于vant),推荐使用该表单。
<twForm :formData="data" @getParamsData="func" @formVerify="formVerify" ref="childForm" @gotoPage='gotoPage'></twForm>
参数说明：
func：点击表单中的保存按钮后，会在此方法中返回表单所填数据。
gotoPage:当组件类型为selectPage时，设置该方法，返回一个回调函数，用于后续自己处理逻辑。
formVerify：（非必要）每当填写某一项表单后，被动触发验证一次表单所有必填
字段是否填
写。如果都填写完成，则会在此方法中返回一个对象。
obj = {
currState: true,//表示必填已填完（此方法中必为true）。
mention: "",//该字段为必填字段没有填写时，返回的该项label文案。
（此方法中，该字段必定为空。主要用于主动触发校验方法时，返回的值。）
sendData:{}//可用于发起请求的表单数据。
}
ref：（非必填）在父组件自定义事件中，通过调用组件内部方法：this.$refs.childForm.verifyReq()
，实现主动触发调用表单验证必填字段的方法。返回对象与formVerify中的返回对象一致。
data:{
title:'vantForm',
hideSaveBtn:false,
isLocalShow:false,
id:'formId',
formList:[
{name:'整数（正负）',required:true,showName:'',value:'',valueName:'breedDate1',placeholder:'digit',type:'digit',limit:50,showLimit:false},
{name:'数字',required:true,value:'',valueName:'breedWeight',placeholder:'number',type:'number',unit:'kg',tofixed:3,isCount:true,blurContact:'price',blurResult:'totalMoney',ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
{name:'正整数（电话号码）',required:true,limit:11,value:'',valueName:'breedNumber',placeholder:'请输入数量',type:'tel',unit:'尾',isCount:true,ggContact:['breedWeight','breedNumber'],ggResult:'breedSpecification'},
{name:'放养规格',value:'',required:true,valueName:'breedSpecification',placeholder:'自动计算（数字*正整数）',type:'number',unit:'克/尾',tofixed:1,readonly:true},
{name:'单价',value:'',required:true,valueName:'price',placeholder:'请输入单价',type:'number',unit:'元/kg',tofixed:2,isCount:true,blur:true,blurContact:'breedWeight',blurResult:'totalMoney'},
{name:'总金额',value:'',required:true,valueName:'totalMoney',placeholder:'自动计算（数字*单价）',type:'number',unit:'元',readonly:true,tofixed:2},
{name:'radio',showName:'',required:true,value:'',valueName:'breedCode111',placeholder:'请选择品种',type:'radio',list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'},{name:'品种3',value:'3'},{name:'品种4',value:'4'},{name:'品种5',value:'5'},{name:'品种6',value:'6'}]},
{name:'radioPop',showName:'',required:true,value:'',valueName:'breedVarietyCode222',placeholder:'请选择品种',type:'radioPop',list:[{name:'品种7',value:'7'},{name:'品种8',value:'8'},{name:'品种9',value:'9'},{name:'品种10',value:'10'},{name:'品种11',value:'11'},{name:'品种12',value:'12'}]},
{name:'checkBox',showName:'',required:true,value:[],valueName:'breedCode',placeholder:'请选择品种',type:'checkBox',maxChoose:3,list:[{name:'品种1',value:'1'},{name:'品种2',value:'2'},{name:'品种3',value:'3'},{name:'品种4',value:'4'},{name:'品种5',value:'5'},{name:'品种6',value:'6'}]},
{name:'checkBoxPop',showName:'',required:true,value:[],valueName:'breedVarietyCode',placeholder:'请选择品种',radioCheckColor:'red',type:'checkBoxPop',list:[{name:'品种7',value:'7'},{name:'品种8',value:'8'},{name:'品种9',value:'9'},{name:'品种10',value:'10'},{name:'品种11',value:'11'},{name:'品种12',value:'12'}]},
{name:'选择客户2',showName:'',required:true,value:'',valueName:'breedDate2',placeholder:'selectPage',type:'selectPage'},
{name:'放养日期',value:'',required:true,valueName:'breedDate',placeholder:'时间选择',type:'selectDate',timeType:'year',startDate:'2020-01-01',endDate:'2020-12-31'},
{name:'放养日期2',value:'',required:true,valueName:'breedDate2',placeholder:'时间段选择',type:'selectRange',startDate:'2020-01-01',rangeColor:'#3399ff',rangeType:'range',endDate:'2020-12-31',startText:'出差',endText:'结束'},
{name:'品种分类',showName:'',required:true,value:'',valueName:'varietyClassifyCode',placeholder:'上拉选择',type:'selectOne',list:
[{values:[{text:'分类111',value:111},{text:'分类222',value:222}],defaultIndex: 0}]},
{name:'品种分类2',required:true,showName:'',value:'',valueName:'varietyClassifyCode2',placeholder:'多列上拉选择',type:'selectOne',list:
[{values:[{text:'分类1',value:1},{text:'分类2',value:2}],defaultIndex: 0},{values:[{text:'分类3',value:3},{text:'分类4',value:4}],defaultIndex: 0},{defaultIndex: 0}]},
{name:'选址',showName:'',required:true,value:'',valueName:'varietyClassifyCode3',placeholder:'级联上拉选择',type:'selectOneContact',levelNum:3,list:
[{
text: '浙江',
value:'1',
children: [{
text: '杭州',
value:'11',
children: [{ text: '西湖区',value:'111' }, { text: '余杭区',value:'112' }]
}, {
text: '温州',
value:'12',
children: [{ text: '鹿城区',value:'121' }, { text: '瓯海区',value:'122' }]
}]
}, {
text: '福建',
value:'2',
children: [{
text: '福州',
value:'21',
children: [{ text: '鼓楼区',value:'211' }, { text: '台江区',value:'212' }]
}, {
text: '厦门',
value:'22',
children: [{ text: '思明区',value:'221' }, { text: '海沧区',value:'222' }]
}]
}]
},
{name:'备注',value:'',valueName:'remark',required:true,type:'textarea',limit:200,placeholder:'富文本框inline',isInline:true},
{name:'备注2',value:'',valueName:'remark2',required:true,type:'textarea',limit:200,placeholder:'富文本框block'},
{name:'放养品种父级Id',value:'',valueName:'breedVarietyParentCode',isHidden:true}
]
}
formList字段说明：
name：label名字。
showName：单选或者多选时，选中后需要展示的文案。
value：传给后台的value值。多选时，value为选中的数组对象
valueName：传给后台的key。
require：true为必填。
list：所有弹出框的内容。
limit：输入框右下角的字数实时展示（针对手动输入项）。
showLimit：是否显示右下角字数实时展示（true/false）。
readonly：是否可填。
disabled：是否禁用。
isHidden：是否隐藏该项。
unit：该项单位。
errMsg：必填输入框的错误提示。（默认：必填！）
isCount：是否有表单字段需要相互计算。
countContact：需要进行计算的字段名。//['price','num']
countResult：计算出来的值赋值到另一个字段。//totalPrice
countRule：计算规则（eval解析）,注释中的a,b对应countContact数组中的字段，目前可以对4个字段进行计算。//(a*b).toFixed(2)
第二套计算模板，与上面三个字段的用法完全一致。当某个字段会进行2次计算的时候，可以用第二套模板进行计算
secContact：//['price','num','discount']
secResult：//totalPrice
secRule：为避免变量冲突，abcd变为a1,b1,c1,d1//(a1*b1*c1).toFixed(2)
type：输入框类型//
text:文本
tel:纯数字
number:数字
tofixed：type为number时，小数位数保留X位。
digit: ±整数
password:密码
selectPage:触发自定义事件
selectDate:选择时间点
startDate：起始时间。
endtDate：结束时间。
timeType：
time：23时59分
datetime（默认） ：2020-01-01 01:01:01
date ：2020-01-01
year-month ：2020-01
year：2020
selectRange:选择时间段
startDate：起始时间。
endtDate：结束时间。
rangeType：
single(默认)：选某天
range：选时间段
rangeColor：组件自定义颜色，默认#3399ff
startText:开始时间下方的文案//'入住'
endText:结束时间下方的文案//'离店'
selectOne:上拉选择（单列，多列）
list:每一列中，values存放展示的数组，defaultIndex设置默认值（0开始）
//[{values:[{text:'分类111',value:111},{text:'分类222',value:222}],defaultIndex: 0}]
selectOneContact:级联上拉选择
list：数据模型见demo
radio:表单内的radio
radioPop:弹出框的radio
radioCheckColor：自定义颜色
checkBox:表单内的checkBox
checkBoxPop:弹出框的checkBox
radioCheckColor：自定义颜色
maxChoose：可以选择的最大数量（默认不限制）
textarea:多行文本
isInline：是否是行内元素。（默认false）
maxHeight：默认100高度（25为一行）
额外方法：
//在组件外主动触发，获取必填验证的表单数据,在getSaveData中返回表单数据
1、this.$refs.childForm.saveData();
//在组件外主动触发，获取没有必填验证的表单数据,在getSaveData中返回表单数据
2、this.$refs.childForm.getCurrData();
2、搜索
<twSearch :searchForm="data" @getSendData="func"></twSearch>
参数说明：
func：//点击组件中的搜索按钮后，会在此方法中返回组件内所填数据。
data:{
formSize:'',//large 默认 small mini
defaultList:[
{name:'',value:'',valueName:'keywords',placeholder:'请输入关键字',type:'text'}
],
highList:[
{name:'所属公司',value:'',valueName:'orgCode',placeholder:'请输入关键字',type:'text'},
{name:'放养品种',value:'',valueName:'breedCode',placeholder:'请选择品种',type:'selectMore',list:[{label:'品种1',value:'1'},{label:'品种2',value:'2'},{label:'品种3',value:'3'},{label:'品种4',value:'4'},{label:'品种5',value:'5'}]},
{name:'品种分类',value:'',valueName:'varietyCode',placeholder:'请选择分类',type:'selectOne',list:[{label:'分类1',value:'1'},{label:'分类2',value:'2'}]},
{name:'放养日期',value:'',valueName:'breedDate',placeholder:'请输入年限',type:'selectDate',dateType:'month'},//默认->date month year
{name:'放养周期',value:'',placeholder:'请输入周期',type:'selectPeriod',startDate:'startDate',endDate:'endDate'}
]
}
字段说明：
formSize：为整个组件的大小配置。
defaultList：默认显示的搜索组件列表。
highList：高级搜索内的组件列表（有相关触发按钮）。
name：label名字。
value：传给后台的value值。多选时，value为选中的数组对象
valueName：传给后台的key。
type：输入框类型//text,selectDate,selectPeriod,selectMore,selectOne。
list：type为selectMore,selectOne时，下拉框的内容。3、分页
<twPagination :total="total" :size="size" @paginaFunc="paginaFunc"></twPagination>
size:字符串，非必填，可选值为：'small'，迷你版的分页样式。
total：table表的总条数。
paginaFunc：当页数或一页显示多少条触发时，返回一个对象。
{currPage: 2, currSize: 10}//当前页、每页显示条数4、步骤条
<Step :stepData="stepData" @toggleStep="toggleStep"></Step>
toggleStep：切换步骤时的回调函数。
stepData：{
class:'moBlueStep',//moBlueStep redStep pcBlueStep 三种颜色，默认moBlueStep
icon:'el-icon-success',//完成后的icon图标，可以用element里面的所有icon，默认el-icon-success
list:[
{name:'步骤1'},
{name:'步骤2'},
{name:'步骤3'}
]
}0.0.1
4 years ago