@lx-ui/form v0.1.2
Form 组件
API
config
注意:
在template中使用的时候应用变量进行赋值,不可直接把值写在template模板中,
如果直接写在模板中,每一次模板更新的时候,该值都是一个全新的值,不断触发更新机制,导致组件内部逻辑形成死锁。
正确
<template>
<div>
<lx-form :config="config">
</lx-form>
</div>
</template>
<script>
export default {
data () {
return {
config: [{ label: '名称', type: 'input', filed: 'name' }]
}
}
}
</script>
错误
<template>
<div>
<lx-form :config="[{ label: '名称', type: 'input', filed: 'name' }]"></lx-form>
</div>
</template>
该组件接收一个JSON类型的数组数据
[
{
label: '姓名',
type: 'input',
filed: 'name',
span: 12,
style: { width: '100%', },
classList: [
'main-input'
],
props: {
value: ''
},
attrs: {
placeholder: '请输入姓名'
},
on: {
input: (val) => {
console.log('val', val)
},
blur: (e) => {
console.log('blur', e)
}
},
...
}
]
config 遵循使用常用的字段名称习惯
具体config属性
{
label: 'xxx', // form-item 的 label
filed: 'xxxx', // 必填项 表单数据对象的字段名
type: 'input', // 必填项 表单输入控件的类型,如:文本框:input、下拉选择框:select
props: 'xxx', // 表单输入控件的 props
span: 24, // 栅格化的 row > col 的 span 配置
style: { // 样式
width: '200px',
marginLeft: '40px'
},
classList: ['default', 'text-center'], // 样式类名
options: [ // 当 type 为 select之类的需要配置数据的类型时的数据
{ label: '已选', value: 1 },
{ label: '未选', value: 0 }
],
attrs: { // dom的原生属性
placeholder: '请输入姓名'
},
on: { // 表单暴露的API方法
change: (val) => {}
},
tips: String | Object // Object: { text:'我是注释', style: {} }
}
Props属性
props 在 createElement 函数的标准上添加了一些新的属性,基本使用可以到VUE官网中查看 createElement函数的传参方式。
Vue2 createElement https://v2.cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1
####新的属性 新的属性根据 type属性的值不同,也会不同,也就是不同的type会使用不同的props的属性。
type: 'digit-select'
数值选择器
实例
{
label: '奖励发放日期',
type: 'digit-select',
filed: 'dates',
props: {
range: [1, 31], // 数值范围, 从1开始进行递增,一直到31
step: 1, // 递增数值,默认为1
precision: 2, // 数值精度
width: '500px' // 组件宽度
}
}
type: 'uploadImg'
图片,列表、上传。实例
{
label: '各类证件',
type: 'uploadImg',
filed: 'papers',
props: {
value: [], // Array(多张图片) | String(单张图片)
isMulti: true, // 是否多选
delConfirm: false, // 点击右上角删除按钮时是否显示确认
limit: 6, // 可上传图片数量上限
limitMessage: '', // 超过上限消息
width: '155px', // 图片框宽度
height: '255px', // 图片框高度
limitWidth: 48, // 上传图片指定宽度
limitHeight: 48, // 上传图片指定高度
limitHeightRange: [48, 96], // 上传图片宽度指定范围
limitWidthRange: [48, 96], // 上传图片高度指定范围
restrictMessage: '', // 不符合限制条件的消息
tips: { // 组件注释
text: '测试拖拽'
},
accept: 'jpg,png', // 限制上传类型后缀
acceptMessage: '' // 不符合限制上传类型的消息
}
type: 'input-number'
数字输入框实例
{
label: '薪资',
type: 'input-number',
filed: 'pay',
props: {
value: '',
controls: false
},
leftText: '每个月', // String | Object,数字输入框左边文字
rightText: { // String | Object,数组输入框右边文字
text: '元',
style: {
color: 'red'
}
},
attrs: {
placeholder: '请输入年龄'
},
tips: '每个月发放'
}
type 类型
text 纯文本 select 下拉框 input-number 数字 cascader 穿梭框 uploadImage 上传图片 radio / radioButton 单选 / 单选按钮 checkbox / checkboxButton 多选 / 多选按钮
Event, on事件监听
{
on: {...}
}
也是在原有的on基础上进行处理,本form组件为了业务方便,提供了一些新的event事件,根据type的不同,调用不同的on事件。
type: Select
提供一个新的Event:select
on: {
select: (item) => {
// item 选中的 option 数据
}
}
自定义
自定义分两种,一是整体render,二是formItemRender
function 类型,参数 h(createElement),参数2 form(form数据对象)
render:
{
// label: '名字',
// filed: 'name',
render (h, form) {
return <div>我占据了这一行<div>
},
// options: []
}
render 会覆盖整个formItem,所以其他属性可以不填写
formItemRender:
formItemRender (h, form) {
return <input />
}
formItemRender 保留了label标题部分,只覆盖该行表单内容
查询config里的某个配置
查询config的配置,可以用于修改我们想要修改配置的属性值,例如disabled = true,改为 false
可以通过 ref 的方式调用组件内部的 searchConfig 函数 searchConfig({ keyName: 'filed', key: 'name' })
就可以找到 属性名:filed,值:name 的这一项配置,直接修改想要修改的属性即可