vux-form v0.1.8

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

<template>
  <vux-form
    ref="form"
    :model="formData"
  >
    <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>
</template>
<script>
  import { VuxForm, VuxFormField } from 'vux-form
  export default {
    components: {
      VuxForm,
      VuxFormField
    },
    data() {
      return {
        formData: {
          aa: ''
        }
      }
    }
  }
</script>

pass built-in components self events

<template>
  <vux-form
    ref="form"
    :model="formData"
  >
    <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>
</template>
<script>
  import { VuxForm, VuxFormField } from 'vux-form

  export default {
    components: {
      VuxForm,
      VuxFormField
    },
    methods: {
      handleInputFocus(value, $event) {
        console.log('handle input focus:', value, $event);
      },
      handleInputBlur(value, $event) {
        console.log('handle input blur:', value, $event);
      }
    }
  }
</script>

validate rules

<template>
  <vux-form
    ref="form"
    :model="formData"
  >
    <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>
</template>
<script>
  import { VuxForm, VuxFormField } from 'vux-form

  export default {
    components: {
      VuxForm,
      VuxFormField
    },
    methods: {
      handleInputFocus(value, $event) {
        console.log('handle input focus:', value, $event);
      },
      handleInputBlur(value, $event) {
        console.log('handle input blur:', value, $event);
      }
    }
  }
</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>

Named slot & Scoped slot

<template>
  <vux-form
    ref="form"
    :model="formData"
  >
    <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>
</template>
<script>
  import { VuxForm, VuxFormField } from 'vux-form
  export default {
    components: {
      VuxForm,
      VuxFormField
    },
    data() {
      return {
        formData: {
          aa: '',
          bb: '',
        },
        options: ['A', 'B', 'C'],
      }
    }
  }
</script>

Props

VuxForm

VuxFormField

built-in components type Mapping

Slot

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

Form Instance Methods

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

npm version patch
yarn build:lib
npm publish

Customize configuration

See Configuration Reference.