vux-form——一个base vux的form解决方案

前言

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"
      
      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"
    
    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"
  
  placeholder="please enter"
  :events="{
    'on-focus': handleInputFocus,
    'on-blur': handleInputBlur
  }"
></vux-form-field>

如何传递内置组件的命名插槽

<vux-form-field
  type="input"
  
  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"
  
  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"
  
  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

VuxFormField

支持的内置组件类型

表单方法

最后

目前该组件已在线上业务稳定上线一年多，用户使用反馈良好。

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

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