el-form-builder

1.3.1 • Public • Published

el-form-builder

This project focks from Vue Form Builder.Build element-ui forms with javascript objects.

🇺🇸 English | 🇨🇳 简体中文

Example

⚡️ Live Preview | 📖 Docs

Screen Capture

Quick Start

First you need to have an element-ui project. If not, it is recommended to create one quickly using the preset below.

vue create --preset codetrial/vue-cli-plugin-element your-project

Install

yarn add el-form-builder
# OR 
npm i el-form-builder

Registry

import ElFormBuilder from 'el-form-builder'
 
Vue.use(FormBuilder)

Witness the miracle moment

Vue template:

<el-form-builder :config="formConfig" v-model="formValues" label-width="80px">
</el-form-builder>

Vue component:

export default {
  data() {
    return {
      formValues: {
        title: 'Some Awesome Title'
      },
 
      formConfig: {
        rules: {
          title: [{ required: true, message: 'Please enter the title' }]
        },
        elements: [
          {
            tag: 'el-input',
            item: {
              label: 'Title'
            },
            detail: {
              name: 'title'
            }
          }
        ]
      }
    }
  }
}

Core Features

  • 📷 Any Component
  • 📺 Form Validation
  • ⌚️ Form Model
  • 📻 Custom Slot

Contributing

Looking forward to your pull requests.

Built With

License

MIT

Copyright (c) 2018 - present, Felix Yang

Package Sidebar

Install

npm i el-form-builder

Weekly Downloads

0

Version

1.3.1

License

MIT

Unpacked Size

1.17 MB

Total Files

14

Last publish

Collaborators

  • lee88688