# vue-json-form-create

> 基于jsonform的vue动态表单组件

Latest version **0.0.5** (published 2020-07-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-json-form-create
pnpm add vue-json-form-create
yarn add vue-json-form-create
bun add vue-json-form-create
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2020-07-13 |
| First published | 2020-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 18.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Rainbower |
| Maintainers | rainbower |

## Links

- npm: https://www.npmjs.com/package/vue-json-form-create
- Repository: https://github.com/Riunshow/vue-form-create
- Homepage: https://github.com/Riunshow/vue-form-create#readme
- Issues: https://github.com/Riunshow/vue-form-create/issues
- npm.io page: https://npm.io/package/vue-json-form-create

## Dependencies (5)

- [vuex](https://npm.io/package/vuex.md) ^3.4.0
- [extend](https://npm.io/package/extend.md) ^3.0.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [mand-mobile](https://npm.io/package/mand-mobile.md) ^2.5.11
- [vee-validate](https://npm.io/package/vee-validate.md) ^3.3.6

## Recent versions

- 0.0.5 (latest) — 2020-07-13
- 0.0.4 — 2020-07-06
- 0.0.3 — 2020-07-02
- 0.0.2 — 2020-07-02
- 0.0.1 — 2020-07-02

## README

# 基于jsonform的vue动态表单组件

> https://github.com/jsonform/jsonform

### how to use
> main.js
```js
import Vue from 'vue'
import Vuex from 'vuex'
import VJF, { VJFStore } from 'vue-json-form-create'

Vue.use(VJF)

new Vue({
  router,
  store: new Vuex.Store(VJFStore),
  render: h => h(App)
}).$mount('#app')
```
> demo.vue
```vue
<template>
  <vue-json-form v-model='formdata1' ref="form1" :formId='1' :formSchema='schema1' />
</template>

<script>
export default {
  data () {
		formdata1: {
      name: 'zxczxc',
      checkboxField: ['option1']
		},
		schema1: {
			schema: {
				name: {
					title: 'Default Name',
					description: 'Nickname allowed',
					type: 'string'
				},
				checkboxField: {
					type: 'array',
					title: '多选框',
					enum: ['option1', 'option2']
				}
			},
			form: [
				{
					key: 'name',
					type: 'input',
					required: true
				},
				{
					key: 'checkboxField',
					type: 'checkboxes',
					required: true,
					titleMap: {
						option1: '选项1',
						option2: '选项2'
					}
				},
        value: {
          name: '',
          checkboxField: []
        }
			]
		}
	}
}
</script>
```

### show
![avatar](https://admin-manage.oss-cn-hangzhou.aliyuncs.com/img/123.png)

### todolist
* ~~初始化的数据绑定到 v-model~~
* ~~表单校验~~
* ~~schema from  value  三者做映射关系(单选多选  enum 和 titleMap 做映射)~~
* 代码优化
* 组件实现
	* mand-mobile
		* 输入框
		* 多选框

* 需在vue.config.js中配置alias
```js
const path = require('path')

module.exports = {
	configureWebpack:{
    resolve: {
			extensions: ['.js', '.vue', '.json',".css"],
			alias: {
				'vue$': path.resolve(__dirname, './node_modules/vue/dist/vue.runtime.esm.js')
			}
    }
	}
}
```

---
_Source: https://npm.io/package/vue-json-form-create · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._