weiuiphp表单生成技巧_基于 Avue 拖拽式表单设计器AvueFormDesign

文章目录 [+]

avue-form-design 基于Avue构建的多功能表单设计器。
拖拽式操作让您快速制作一个FORM表单。

安装依赖

$ npm i element-ui -S$ npm i @smallwei/avue -S

安装表单组件

（图片来自网络侵删）

$ npm i @sscfaith/avue-form-design -S

利用组件

<template> <div id="app"> <avue-form-design style="height: 100vh;" :options="options" :aside-left-width="275" :aside-right-width="360" storage @submit="handleSubmit"> </avue-form-design> </div></template><script>import AvueFormDesign from '@sscfaith/avue-form-design'export default { components: { AvueFormDesign }, data () { return {} }, methods: { // 天生json回调 handleSubmit(data) { console.log(data) } }}</script>

图文编辑器

如果须要用到富文本编辑器，须要安装依赖avue-plugin-ueditor。

import AvueUeditor from 'avue-plugin-ueditor'Vue.use(AvueUeditor)

属性

options字段配置

拖拽式编辑组件

表单预览效果

表单天生JSON

天生JSON代码编辑器基于ACE，可对代码进行格式化、压缩、排序、筛选等操作。

https://ace.c9.io/

末了附上示例及项目地址

# 预览地址https://form.beta.kim/# 仓库地址https://github.com/sscfaith/avue-form-design