前言
组件是前端vue基于element的组件,十分轻量,只包含输入、选择、时间日期选择与多选框,默认form是同一行的,设置为inline,按钮可以有多个
一、使用步骤
1.局部引入
①将组件放入components中
②使用import局部引入
③components声明
2.读入数据
该组件可以传三个变量,分别是form,size,searchFormList,其中form与searchFormList是必须的
<search-form :form="form" :size="size" :searchFormList="searchFormList"></search-form>
form与searchFormList是必须的
所有事件都包含change事件,通过数组进行传导,id作为唯一标识,label为标签文本,value为form内的键值,class为选择不同组件的判定条件
searchFormList大致数据样式:
searchFormList: [
{id:0,label:'姓名',value:'name',prop:'name',class:'input'},
{id:1,label:'年龄',value:'age',prop:'age',class:'input'},
{id:2,label:'性别',value:'sex',prop:'sex',class:'select'},
{id:3,label:'地址',value:'address',prop:'address',class:'input'},
{id:4,label:'生日',value:'birthday',prop:'birthday',class:'dateSelect', type:'datetime'},
],
form直接就写成form:{}吧,不占地方,而且因为是搜索框组件,没有必填校验
class | 判断类型,input |
value | 绑定参数名称 |
pIcon | Input输入框前图标 |
sIcon | Input后输入框图标 |
max | 最大输入长度 |
min | 最小输入长度 |
clear | 是否可以清空 |
disabled | 是否禁用 |
plac | 无值时显示内容 |
inputChange | Change事件(传val输入值与item组件值) |
inputInput | Input事件(同上) |
class | 判断类型,select |
value | 绑定参数名称 |
clear | 是否可以清空 |
disabled | 是否禁用 |
plac | 无值时显示内容 |
options | 选择数组,label绑定label,value绑定value,在mounted里绑定,或options值变化时改变,watch监听 |
selectChange | Change事件(传val输入值与item组件值) |
class | 判断类型,timeSelect |
value | 绑定参数名称 |
clear | 是否可以清空 |
disabled | 是否禁用 |
plac | 无值时显示内容 |
isRange | 是否为时间范围,true和false。是为数组[HH:mm:ss,HH:mm:ss],不是为字符串HH:mm:ss, |
selectTimeChange | Change事件(传val输入值与item组件值) |
class | 判断类型,dateSelect |
value | 绑定参数名称(单个为字符串yyyy-MM-dd或yyyy-MM-dd HH:mm:ss;范围为数组,[yyyy-MM-dd,yyyy-MM-dd]或[yyyy-MM-dd HH:mm:ss,yyyy-MM-dd HH:mm:ss]) |
clear | 是否可以清空 |
disabled | 是否禁用 |
plac | 无值时显示内容 |
type | 选择日期类型,四种:date,datetime,daterange,datetimerange(日期,日期+时间,日期范围,日期时间范围) |
selectDateChange | Change事件(传val输入值与item组件值) |
class | 判断类型,checkbox |
value | 绑定参数名称 |
disabled | 是否禁用 |
border | 是否有边框 |
checkboxChange | Change事件(传val输入值与item组件值) |
class | 判断类型,button |
type | Element原生type |
icon | 按钮图标 |
btnClick | 点击事件(传val输入值与item组件值) |
name | 按钮名称 |
3.代码
单个vue文件
html:
<template>
<div>
<el-form :inline="true" :model="formCopy" :size="sizeCopy">
<el-form-item v-for="item in searchFormListCopy" :key="item.id" :label="item.label">
<el-input
v-if="item.class == 'input'"
v-model="formCopy[item.value]"
:prefix-icon="item.pIcon"
:suffix-icon="item.sIcon"
:maxlength="item.max"
:minlength="item.min"
show-word-limit
:clearable="item.clear"
:disabled="item.disabled"
:placeholder="item.plac||'请输入'+item.label"
@change="(val)=>{
item.inputChange&&item.inputChange(val,item)
}"
@input="(val)=>{
item.inputInput&&item.inputInput(val,item)
}">
</el-input>
<el-select
v-if="item.class == 'select'"
:clearable="item.clear"
v-model="formCopy[item.value]"
:disabled="item.disabled"
:placeholder="item.plac||'请选择'+item.label"
@change="(val)=>{
item.selectChange&&item.selectChange(val,item)
}">
<el-option
v-for="item2 in item.options"
:key="item2.value"
:label="item2.label"
:value="item2.value">
</el-option>
</el-select>
<el-time-picker
v-if="item.class == 'timeSelect'"
:is-range="item.isRange"
v-model="formCopy[item.value]"
:disabled="item.disabled"
value-format="HH:mm:ss"
:clearable="item.clear"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:placeholder="item.plac||'请选择'+item.label"
@change="(val)=>{
item.selectTimeChange&&item.selectTimeChange(val,item)
}">
</el-time-picker>
<el-date-picker
v-if="item.class == 'dateSelect'"
v-model="formCopy[item.value]"
:type="item.type"
:value-format="item.type == 'datetime'?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'"
:disabled="item.disabled"
:clearable="item.clear"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
:placeholder="item.plac||'请选择'+item.label"
@change="(val)=>{
item.selectDateChange&&item.selectDateChange(val,item)
}">
</el-date-picker>
<el-checkbox
v-if="item.class == 'checkbox'"
v-model="formCopy[item.value]"
:disabled="item.disabled"
:border="item.border"
@change="(val)=>{
item.checkboxChange&&item.checkboxChange(val,item)
}">{{item.name}}</el-checkbox>
<el-button
v-if="item.class == 'button'"
:type="item.type"
@click="btnClick(item,formCopy)"
:icon="item.icon">{{item.name}}</el-button>
</el-form-item>
</el-form>
</div>
</template>
js:
<script>
export default {
props: {
form: {
type: Object,
default: function() {
return {}
}
},
size: {
type: String,
default: 'mini'
},
searchFormList: {
type: Array,
default: function() {
return []
}
}
},
data() {
return {
formCopy: {},
sizeCopy: 'mini',
searchFormListCopy: []
}
},
watch: {
form: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
this.formObjCopy = newVal
}
},
size: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
this.sizeCopy = newVal
}
},
searchFormList: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
this.searchFormListCopy = newVal
}
}
},
methods: {
btnClick(data, form) {
data.event && this.$parent[data.event](data, form)
}
}
}
</script>
总结
第一次学习封装,自己跑还行,没太多bug,逻辑可能有问题,不能灵活适应某些要求。看看后续能不能优化,希望各位大佬提出意见。