FormMaking V3

您所在的位置：网站首页 › 可视化代码生成器 › FormMaking V3

FormMaking V3

2024-07-12 05:41| 来源: 网络整理| 查看: 265

FormMaking V3

FormMaking V3 是 Vue 3.x 升级版本，基于 Vue 3.x 和 Element Plus 开发的可视化/低代码表单设计器，可以生成 Element 和 Antd 样式的表单。

安装下载 FormMaking V3

点击这里 ↗ 下载产品（选择V3版本），下载后将其解压到项目中。

TIP

可以放于项目任何位置上，本文档以项目根目录为例，其他位置只需要修改引入路径即可

Import 引入 javascriptimport FormMakingV3 from 'form-making-v3/dist/form-making-v3.es.js' import 'form-making-v3/dist/index.css'浏览器引入

直接通过浏览器的 script 和 link 标签导入 FormMaking V3，就可以使用全局变量 FormMakingV3 了。

html 引入 Element Plus bash# NPM $ npm install element-plus --save # Yarn $ yarn add element-plus # pnpm $ pnpm install element-plus在 Vue 项目中使用 Vue 配置

如果需要使用自定义组件字段进行表单的配置，需要在项目中使用 Vue 的完整版本（同时包含编译器和运行时的版本）。

js// vite.config.js resolve: { alias: { 'vue': 'vue/dist/vue.esm-bundler.js' } }js// vue.config.js chainWebpack: config => { config.resolve.alias.set('vue$', 'vue/dist/vue.esm-bundler.js') }完整引入 jsimport { 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')引入部分组件 jsimport { 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')开始使用 vue

TIP

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

使用 Ant Design Vue

提醒

如果项目中没有用到 Ant Design Vue 组件库，可以忽略这里。

安装 Ant Design Vue bash# NPM $ npm install ant-design-vue --save # Yarn $ yarn add ant-design-vue # pnpm $ pnpm install ant-design-vue

TIP

从 3.7.0 版本开始，我们已经更新到 [email protected]，如果需要使用 3.x 版本，可以使用之前版本。

引入Ant Design Vue jsimport Antd from 'ant-design-vue' import { Form } from 'ant-design-vue' import 'ant-design-vue/dist/reset.css' app.use(Antd) // 需要提供 useInjectFormItemContext 依赖，以便表单能实时校验 app.provide('useInjectFormItemContext', Form.useInjectFormItemContext)开始使用 vue

TIP

3.7.0 版本后，设计器默认将不开启 Antd 的渲染，如果需要预览查看 Antd 样式的表单，需要将 use-antd-form 属性设置为 true。

在 Html 文件中使用 htmlDOCTYPE html> html,body,#app{ height: 100%; } Vue.createApp({}).use(ElementPlus).use(FormMakingV3).mount('#app')

【本文地址】

FormMaking V3

FormMaking V3

今日新闻

推荐新闻