# lgForm

**Repository Path**: lginsane/lgForm

## Basic Information

- **Project Name**: lgForm
- **Description**: 基于 Vue,ElementUI 开发的一款表单设计器
- **Primary Language**: Unknown
- **License**: LGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-25
- **Last Updated**: 2024-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# lgForm

#### 介绍

基于 Vue,ElementUI 开发的一款表单设计器

#### 下载

npm i lg-form

#### 使用表单，查看表单

```
import FormMaking from 'lg-form'
import 'lg-form/dist/FormMaking.css'
Vue.use(FormMaking)
```
```
<fm-generate-form
  insite="true"
  :data="widgetForm"
  :value="widgetModels"
  :remote="remoteFuncs"
  ref="generateForm"
></fm-generate-form>
```
```
data() {
  return {
    widgetForm: {
      list: [],
      config: {
        labelWidth: 100,
        labelPosition: 'right',
        size: 'small'
      }
    },
    // 表单赋值
    widgetModels: {},
    remoteFuncs: {}
  }
}
```

#### 设计表单
```
<fm-making-form
  ref="makingForm"
  preview
  generate-json
  generateHTML
  clearable
  @handleGenerateJson="handleGenerateJson"
  @handleGenerateCode="handleGenerateCode">
  <template slot="action"></template>
</fm-making-form>
```
```
methods: {
  handleGenerateJson(val) {
    console.log(val)
  },
  handleGenerateCode(val) {
    console.log(val)
  }
}
```
```
preview: 预览
generate-json: 属性
generateHTML: HTML
clearable: 清除
```
借鉴：http://tools.xiaoyaoji.cn/