VUE

基于Vue的表单设计器vue-form-making(推荐)

vue-form-making基于Vue的可视化在线拖拉表单设计器,让表单开发简单而高效

基于Vue的表单设计器vue-form-making

特性

  • 可视化配置页面
  • 提供栅格布局,并采用flex实现对齐
  • 一键预览配置的效果
  • 一键生成配置json数据
  • 一键生成代码,立即可运行
  • 提供自定义组件满足用户自定义需求
  • 提供远端数据接口,方便用户需要异步获取数据加载
  • 提供功能强大的高级组件
  • 支持表单验证
  • 快速获取表单数据

安装

# npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm install form-making -S 

# CDN

目前可以通过 unpkg.com/form-making 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。建议使用 CDN 引入 FormMaking 的用户在链接地址上锁定版本,以免将来 FormMaking 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>

<!-- 需要在设计器中预览代码需要引入ace.js库 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

# Hello world

通过 CDN 的方式我们可以很容易地使用 FormMaking 来加载表单设计页面。

如果是通过 npm 安装,并希望配合 webpack 使用

!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
</head>
<body>
  <div id="app">
    <!-- 需要设置编辑区域高度 -->
    <fm-making-form style="height: 500px;" preview generate-code generate-json>
    </fm-making-form>
  </div>
</body>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
  <!-- 需要在设计器中预览代码需要引入ace.js库 -->
  <script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
  
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</html>

相关链接

发表评论