指南 - 快速开始 - 《FormMaking V3 文档》

用法
- 完整引入
- 引入部分组件
开始使用
在 Html 中使用

本节将介绍如何在项目中使用 FormMaking V3。

用法

完整引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import FormMakingV3 from '@/form-making-v3'
import '@/form-making-v3/dist/index.css'
import App from './App.vue'
createApp(App).use(ElementPlus).use(FormMakingV3).mount('#app')

引入部分组件

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import {
  MakingForm,
  GenerateForm
} from '@/form-making-v3'
import '@/form-making-v3/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.use(MakingForm)
app.use(GenerateForm)
app.mount('#app')

开始使用

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
    preview 
    generate-code 
    generate-json
  >
  </fm-making-form>
</template>

使用时需要设置设计器的高度，默认情况高度是根据父元素 100% 来渲染。

在 Html 中使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
  <link rel="stylesheet" href="form-making-v3/dist/index.css">
  <style>
    html,body,#app{
      height: 100%;
    }
  </style>
</head>
<body >
  <div id="app" >
    <fm-making-form preview generate-code generate-json>
    </fm-making-form>
  </div>
</body>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
<script src="form-making-v3/dist/form-making-v3.umd.js"></script>
<script>
  Vue.createApp({}).use(ElementPlus).use(FormMakingV3).mount('#app')
</script>
</html>