首页>>后端>>java->vue拖拽组件生成前端页面(vue拖拉拽生成组件)

vue拖拽组件生成前端页面(vue拖拉拽生成组件)

时间:2023-12-05 本站 点击:0

Vue 前端可视化活动编辑器

先看效果,为一个可视化活动编辑器。

基于 JSON Schema 开箱即用的简单活动可视化编辑器。

在做生成一个可视化店铺装修系统的时候,需要解决配置数据表单的通用性,参阅了一些现用的解决方案,最终通过 JSON Schema 来生成对应的陆型亩表单和校验规则。

JSON Schema 主要运用在如下几点:

首先可视化编辑器需要做到板块的管理,这些板块支持可视化的编辑配置和效果展示,最终相互组装为一个页面。

每个板块我们不可避免的需要一个 View组件 来做展示,因为每个板块都长得不一样。板块配置表单和数据校验都通过 JSON Schema 来实现,然后再通过一个拖动的容器来承租瞎载这些板块以及一些其它的数据配置。

如下图:

这样当我们在添加新的板块时,只需要开发一个 View组件 ,和书写一份 JSON Schema 来定义早森数据即可。

添加新的板块只需要在 config/tools.js 导入新增的板块,并且配置好工具栏即可,如:

新增板块文件结构如下:( viewComponents/FlashSaleGoodsList/index.js 这里对应上面工具栏配置导入的组件包文件)

导出模块解释如下:

如果需要更多 vue-json-schema-form 参数可直接在 packages/demo/src/vue-editor/views/editor/Editor.vue 渲染 VueElementForm 组件时添加即可。

整个实现相对比较简单,感兴趣的可以花上两个小时看下源码,欢迎讨论提问。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/java/13258.html