@lefreet/vue-form

基础表单组件

Stats

StarsIssuesVersionUpdatedCreatedSize
@lefreet/vue-form
1301.0.133 years ago4 years agoMinified + gzip package size for @lefreet/vue-form in KB

Readme

基于element-ui的vue表单组件封装,通过配置生成表单

Build Status

live demo

说明

通过config配置项生成一张表单,起因是项目应用中,有几百张表单要通过对应的json配置自动生成,方便通过配置维护,才做了这个组件。

组件的npm包名称是@lefreet/vue-form,不是vue-form。不想取别的名字了,@lefreet/vue-form更关注表单配置抽象和简单取值。

  • 发现低版本的脚手架存在postcss-url的依赖缺失问题, 集成本组件时发现postcss-url引用报错,执行:npm i postcss-url -D解决.

使用

# install
npm install @lefreet/vue-form --save
<template>
  <div id="app">
    <vue-form :config="config" @submit="submit" ref="form"></vue-form>
  </div>
</template>

<script>
  import VueForm from '@lefreet/vue-form'

  export default {
    components: { VueForm },
    data () {
      return {
        config: {
          'cols': 1,
          'label-width': '200px',
          'values': {},
          'fields': [{
            'type': 'input',
            'prop': 'name',
            'label': 'name',
            'options': {
              // some options of element component
              'placeholder': 'input your name'
            }
          }, {
            'type': 'radio',
            'prop': 'sex',
            'label': 'sex',
            'options': {
              // some extend options by me
              'radios': [{
                'label': 'man',
                'value': 1  
              }, {
                'label': 'woman',
                'value': 2
              }]
            }
          }]
        }
      }
    },
    methods: {
      // on submit event to get form's values by verifying
      submit (values) {
        console.log(values)
      },
      // use method to clear all fields
      clear () {
        this.$refs['form'].clearFields()
      }
    }
  }
</script>

可选控件列表

  • input 文本框
  • radio 单选框
  • checkbox 复选框
  • select 下拉框
  • switch 开关
  • tree 树形下拉框
  • date 时间选择框
  • upload 文件上传
  • richtext 富文本编辑器(vue-quill-editor)

具体用法见live demo欢迎提issue

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.