3.0.10 • Published 2 months ago
vue-form-craft v3.0.10
vue-form-craft
基于 vue 和 element-ui 实现的表单设计器 + 渲染器
使用了最新的前端技术栈,可以让你免去vue项目中表单的烦恼。
特性
- 可视化设计表单
- 支持三十多种的表单组件(el所有表单组件、内置组件)
- 支持收集Array数据(自增组件)
- 用法简单,又非常高效的表单联动
- 可预览生成的json配置
- 可预览生成的VUE组件
- 高扩展性、支持自定义组件、支持各种ui组件库来替换ui
- 支持表单填写校验
- 组件无限深层嵌套,深层校验
- 支持远程获取表单的schema,后台存储表单,前端在线修改
第三方插件
- vuedraggable
- element-ui
- json-editor-vue3
- codemirror
- lodash
- md-editor-v3
使用
版本要求
vue@3.x
安装
npm i vue-form-craft
//或
yarn add vue-form-craft
//或
pnpm i vue-form-craft
全局注册
import { createApp } from 'vue'
import App from './App.vue'
import VueFormCraft from 'vue-form-craft'
const app = createApp(App)
app.use(VueFormCraft)
app.mount('#app')
使用
使用表单设计器
<template>
<form-design @onSave="onSave" />
</template>
<script setup>
const onSave = (schema) => {
console.log(schema)
}
</script>
使用表单渲染器
<template>
<schema-form :schema="schema" footer @onFinish="onFinish" />
</template>
<script setup>
const onFinish = (values) => {
alert(JSON.stringify(values))
}
const schema = {
"labelWidth": 150,
"labelAlign": "right",
"size": "default",
"items": [
{
"label": "用户名",
"component": "Input",
"props": {
"placeholder": "请输入用户名"
},
"designKey": "form-eNR0",
"name": "username",
"required": true
},
{
"label": "密码",
"component": "Password",
"props": {
"placeholder": "请输入密码"
},
"designKey": "form-D1x7",
"name": "password",
"required": true
}
]
}
</script>
3.0.10
2 months ago
3.0.4
2 months ago
3.0.3
2 months ago
3.0.2
2 months ago
3.0.8
2 months ago
3.0.7
2 months ago
3.0.6
2 months ago
3.0.9
2 months ago
3.0.1
2 months ago
3.0.0
2 months ago
2.4.2
3 months ago
2.3.1
3 months ago
2.1.2
3 months ago
2.2.5
3 months ago
2.2.6
3 months ago
2.1.1
3 months ago
2.0.31
3 months ago
2.0.32
3 months ago
2.0.30
3 months ago
2.0.28
3 months ago
2.0.29
3 months ago
2.0.26
3 months ago
2.0.27
3 months ago
2.0.24
3 months ago
2.0.25
3 months ago
2.0.22
3 months ago
2.0.23
3 months ago
2.0.21
4 months ago
2.0.20
4 months ago
2.0.16
4 months ago
2.0.19
4 months ago
2.0.17
4 months ago
2.0.18
4 months ago
2.0.15
4 months ago
2.0.13
4 months ago
2.0.14
4 months ago
2.0.12
4 months ago
2.0.11
4 months ago
2.0.7
4 months ago
2.0.6
4 months ago
2.0.9
4 months ago
2.0.10
4 months ago
2.0.8
4 months ago
2.0.5
4 months ago
2.0.4
4 months ago
2.0.3
5 months ago
2.1.0
5 months ago
0.0.7
5 months ago
0.0.6
5 months ago
0.0.5
5 months ago
0.0.4
5 months ago
0.0.3
5 months ago
0.0.2
5 months ago
1.0.1
5 months ago
1.0.0
5 months ago