vux-form——一个base vux的form解决方案vue移动端有很多优秀的组件库，其中个人开发者airyland

前言

vue移动端有很多优秀的组件库，其中个人开发者airyland开发的开源组件库vux在众多公司级别的开源组件库中独树一帜，拥有高达17.4k的star。

但是在业务开发中使用vux存在一个长期的痛点：移动端表单的需求很常见，而vux缺少一个统一管理表单项的组件。因此vux-form应运而生。

它解决了什么问题呢？

统一表单的校验方式，以及校验提醒的样式
统一表单的取值方法submit 它又支持哪些特性呢？
支持多种内置组件，提高表单编写效率
支持内置组件的命名插槽和作用域插槽
支持自定义表单项
提供重置表单方法resetFields，清除校验方法clearValidate

vux-form

百闻不如一见，下面是线上demo:

ejayyoung.github.io/vux-form/

如何安装

使用npm或者yarn安装

npm install -S vux-form
// or
yarn add 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>

如何传递内置组件的props

通过vux-form-field的props属性传递

  <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的events属性传递

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

如何定义校验规则

校验规则的定义可以参考async-validator

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

如何自定义表单项

给vux-form-field绑定prop用于校验，其slot就用于渲染自定义组件

<vux-form-field
  prop="aa"
>
  <custom-component v-model="formData.aa"></custom-component>
</vux-form-field>

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

支持的内置组件类型

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

表单方法

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

最后

目前该组件已在线上业务稳定上线一年多，用户使用反馈良好，可以提高vux的表单开发效率30%

所以看到的小伙伴可以尝试一下vux-form，有问题或好的想法都可以提issue

原创不宜，也请不要吝啬你们手中的Star ：）