a form solution for vux
npm install -S vux-form
// or
yarn add vux-form
https://ejayyoung.github.io/vux-form/
<template>
<vux-form
ref="form"
:model="formData"
>
<vux-form-field
type="input"
prop="aa"
title="Input"
placeholder="please enter"
required
message="Input is required"
></vux-form-field>
</vux-form-field>
</template>
<script>
import { VuxForm, VuxFormField } from 'vux-form
export default {
components: {
VuxForm,
VuxFormField
},
data() {
return {
formData: {
aa: ''
}
}
}
}
</script>
<vux-form-field
type="input"
prop="aa"
title="Input"
placeholder="please enter"
:props="{
'type': 'email',
'readonly': true,
'text-align': 'right'
}"
></vux-form-field>
<vux-form-field
type="input"
prop="aa"
title="Input"
placeholder="please enter"
:events="{
'on-focus': handleInputFocus,
'on-blur': handleInputBlur
}"
></vux-form-field>
<vux-form-field
type="input"
title="named slot"
prop="aa"
placeholder="please enter"
>
<span slot="label">named slot label</span>
<x-button
slot="right"
type="primary"
action-type="button"
mini
>发送验证码</x-button>
</vux-form-field>
<vux-form-field
type="radio"
title="scope slot"
prop="bb"
:props="{
options
}"
>
<template
slot-scope="props"
slot="each-item"
>
<p>
custom item
<img
src="https://github.com/airyland/vux/blob/v2/logo.png?raw=true"
class="vux-radio-icon"
/>
{{ props.label }}
<br />
<span style="color:#666;">{{ props.index + 1 }} another line</span>
</p>
</template>
</vux-form-field>
<vux-form-field
type="input"
prop="aa"
title="Input"
placeholder="please enter"
:props="{
type: 'number'
}"
:rules="[
{ required: true, message: 'input is required' },
{
validator(rules, value, cb) {
if (value > 0) {
cb()
} else {
cb('请输入大于0的数字')
}
}
}
]"
></vux-form-field>
</script>
<template>
<vux-form
ref="form"
:model="formData"
>
<vux-form-field
prop="aa"
>
<custom-component v-model="formData.aa"></custom-component>
</vux-form-field>
</vux-form-field>
</template>
<script>
import { VuxForm, VuxFormField } from 'vux-form
import CustomComponent from 'custom-component'
export default {
components: {
VuxForm,
VuxFormField,
CustomComponent
},
data() {
return {
formData: {
aa: ''
}
}
}
}
</script>
property | type | default | description |
---|---|---|---|
model | Object | {} | 表单数据对象,在使用validate方法情况下,为必填 |
property | type | default | description |
---|---|---|---|
prop | String | - | 表单域字段,传入VuxForm 组件的model 中的key ,在使用validate方法情况下,为必填 |
title | String | - | label标签的文本 |
placeholder | String | - | 表单域占位符的文本 |
type | String | - | 内置组件类型,目前已有:input , textarea , number , datetime , picker , radio , uploader |
props | Object | - | 内置组件对应组件的props, 参考demo |
events | Object | - | 内置组件对应组件的events, 参考demo |
rules | Array | Object | - | 校验规则,参考async-validator |
required | Boolean | - | 是否必填 |
message | String | - | 校验提示语 |
type | component |
---|---|
input | x-input |
textarea | x-textarea |
number | x-number |
datetime | datetime |
picker | popup-picker |
radio | popup-radio |
uploader | vux-uploader-component |
当使用自定义组件时,vuxFormField的插槽用于渲染自定义组件,见demo
当使用内置组件时,vuxFormField的插槽会作为内置组件的插槽,见demo
method | description | params |
---|---|---|
validate | 对整个表单进行校验的方法,参数为一个回调函数,该回调函数会在校验结束后被调用,并传入两个参数:valid(是否校验通过),invalidFields(未通过校验的字段),若不传入回调函数,则会返回一个promise | Function(callback: Function(valid: Boolean, invalidFields: Object) |
submit | 提交表单 | 同上 |
resetFields | 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 | - |
clearValidate | 移除表单项的校验结果,传入待移除的表单项prop或者prop组成的数组,如不传则移除整个表单的校验结果 | Function(props: array |
- 内置类型扩展及完善
- 统一的表单样式及校验方式
- 重置表单方法
resetField
- 清空校验方法
clearValidate
- 支持命名插槽和作用域插槽
yarn
yarn serve
yarn build:demo
yarn build:lib
yarn run lint
yarn build:lib
npm version patch
npm publish