@ formio/ veue
A 类 Vue.js (英语) 提供表格的组件 表格.io 平台.
正式文件
最新文件、发布资料和指南一律参考本文中提供的官方表格:
安装
无
Vue Formio 可以在服务器上使用,或者为客户端用
npm相容包装系统,例如 浏览器 或者说
网络软件包。 。 。 .
npm install @formio/vue --save
基本用途
Vue 模板文件内的 HTML :
<template>
<div id="app">
<formio src="" url="" form="" submission="" options="" v-on:submit=""></formio>
</div>
</template>
Vue 模板文件内部的 Javascript.
<script>
import { Form } from '@formio/vue';
export default {
name: 'app',
components: { formio: Form },
}
</script>
道具
src 数字 : string
API 源代码的表单 表单.io 或者您的自定义格式服务器 .
见 创建窗体 为您的窗体设置 API 路径.
您也可以通过提交url作为 src 表格将随划界案所载数据一起制作.
url 数字 : string
如果您直接通过表单并提交,一些组件如资源,文件和表单需要了解表单在服务器上的url. 用url选项传过来.
form 数字 : object
代表窗体的物体。 使用此选项代替自定义表单 .
说明: src 如果使用, 将覆盖此属性 .
submission数字 : Object
表示窗体默认数据的对象.
说明: src 如果输入提交 url , 将覆盖此选项.
options数字 : object
带有流经的 formeio.js 选项的对象。 见 窗体.io 选项。 。 。 .
活动
表格引发的所有事件均可通过v-on属性获取. 见 表.io 事件 为所有可用的事件.
然后在表单上 <formio src="myform" v-on:submit="doSomething" />
窗体构建器
Vue 模板文件内的 HTML :
<template>
<div id="app">
<formbuilder v-bind:form="{display: 'form'}" v-bind:options="{}" v-on:change="(schema) => console.log(schema)"></formbuilder>
</div>
</template>
Vue 模板文件内部的 Javascript.
<script>
import { FormBuilder } from '@formio/vue';
export default {
name: 'app',
components: { FormBuilder },
}
</script>
窗体动作
访问表单实例
<template>
<div id="app">
<formio ref="formioForm"></formio>
</div>
</template>
运行方法
this.$refs.formioForm.formio.submit()
所有方法都在这里 https://help.form.io/developers/form-renderer#form-methods (中文(简体) )
许可证
释放 MIT 许可证。 。 。 . 触摸