ejayyoung / vux-form

a form solution for vux

vux-form

a form solution for vux

Install

npm install -S vux-form

// or

yarn add vux-form

Online demo

https://ejayyoung.github.io/vux-form/

Usage

Basic

<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>

pass built-in components self props

<vux-form-field
  type="input"
  prop="aa"
  title="Input"
  placeholder="please enter"
  :props="{
    'type': 'email',
    'readonly': true,
    'text-align': 'right'
  }"
></vux-form-field>

pass built-in components self events

<vux-form-field
  type="input"
  prop="aa"
  title="Input"
  placeholder="please enter"
  :events="{
    'on-focus': handleInputFocus,
    'on-blur': handleInputBlur
  }"
></vux-form-field>

pass built-in components named slot

<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>

pass built-in components scoped slot

<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>

validate rules

<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>

custom field

<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>

Props

VuxForm

property	type	default	description
model	Object	{}	表单数据对象，在使用validate方法情况下，为必填

VuxFormField

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	-	校验提示语

built-in components type Mapping

type	component
input	x-input
textarea	x-textarea
number	x-number
datetime	datetime
picker	popup-picker
radio	popup-radio
uploader	vux-uploader-component

Slot

当使用自定义组件时，vuxFormField的插槽用于渲染自定义组件，见demo
当使用内置组件时，vuxFormField的插槽会作为内置组件的插槽，见demo

Form Instance Methods

method	description	params
validate	对整个表单进行校验的方法，参数为一个回调函数，该回调函数会在校验结束后被调用，并传入两个参数：valid(是否校验通过),invalidFields(未通过校验的字段)，若不传入回调函数，则会返回一个promise	Function(callback: Function(valid: Boolean, invalidFields: Object)
submit	提交表单	同上
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	-
clearValidate	移除表单项的校验结果，传入待移除的表单项prop或者prop组成的数组，如不传则移除整个表单的校验结果	Function(props: array

TodoList

• 内置类型扩展及完善
• 统一的表单样式及校验方式
• 重置表单方法resetField
• 清空校验方法clearValidate
• 支持命名插槽和作用域插槽

Development

yarn

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for demo

yarn build:demo

build for production with minification

yarn build:lib

Lints and fixes files

yarn run lint

publish package

yarn build:lib
npm version patch
npm publish

Customize configuration

See Configuration Reference.

vux-form's Issues

内置组件的命名slot无法插入

解决方案：通过vm.$slots获取具名插槽，再插入到内置component的slot中