https://github.com/jmingzi/vant-form

基于 vant 的 h5 可视化表单方案
https://github.com/jmingzi/vant-form

Last synced: 6 months ago
JSON representation

基于 vant 的 h5 可视化表单方案

• Host: GitHub
• URL: https://github.com/jmingzi/vant-form
• Owner: Jmingzi
• Created: 2020-03-02T03:26:44.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T08:50:14.000Z (almost 3 years ago)
• Last Synced: 2023-03-02T06:25:44.205Z (over 2 years ago)
• Language: JavaScript
• Homepage: https://iming.work/demo/vant-form/dist/index.html#/editor
• Size: 5.9 MB
• Stars: 14
• Watchers: 1
• Forks: 7
• Open Issues: 27
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# vant-form

基于 vant 封装的可视化表单系统

### demo

![](./screenshot.jpg)

### 安装

```

# 依赖 tcon 样式

npm i vant-form tcon --save

```

### 使用

流程

- 在[后台](https://iming.work/demo/vant-form/dist/index.html#/editor)配置需要的字段，点击保存，下载到项目中

- 在项目中安装 Render 组件，按照以下方式使用即可

> 方式一：组件引入

```vue

  

import vantForm from 'vant-form'

// 通过系统生成的 json 文件

import schema from './schema.json'

const data = ref({})

const schema = ref(schema)

export default {

  components: {

    vantForm

  },

  setup () {

    return {

      // schema 必须是响应式的 

      schema: schema.value,

      dataValue: data.value,

      handleSubmit (schema, data) {

        // do...

      }   

    } 

  }

}

```

> 方式二：全局引入

因为组件包是 umd 格式的

```js

const data = ref({})

const schema = ref(window.schema)

new Vue({

    render (h) {

      return h(window['vantForm'].default, {

        props: {

          schema: schema.value,

          data: data.value

        }

      })

    }

}).$mount('#app')

```

### 插槽

提交按钮不是必须的，可以通过默认插槽来覆盖

### 校验

默认的提交按钮做了校验操作，如果是自行覆盖提交，需要调用校验函数。

```js

import { validate } from 'vant-form'

const valid = validate(schema, data) // boolean

```