先看效果晤揣，為一個(gè)可視化活動(dòng)編輯器。
演示地址：https://form.lljj.me/vue-editor.html#/editor
項(xiàng)目地址：https://github.com/lljj-x/vue-json-schema-form/
基于 JSON Schema 開箱即用的簡單活動(dòng)可視化編輯器空免。
背景
在做生成一個(gè)可視化店鋪裝修系統(tǒng)的時(shí)候，需要解決配置數(shù)據(jù)表單的通用性踩蔚，參閱了一些現(xiàn)用的解決方案砚嘴，最終通過 JSON Schema 來生成對(duì)應(yīng)的表單和校驗(yàn)規(guī)則。
JSON Schema 主要運(yùn)用在如下幾點(diǎn)：
- 基于
JSON Schema來動(dòng)態(tài)生成數(shù)據(jù)配置表單和數(shù)據(jù)校驗(yàn) - 結(jié)合發(fā)布流程同步
JSON Schema到后端系統(tǒng)做接口數(shù)據(jù)校驗(yàn) - 一個(gè)活動(dòng)版塊對(duì)應(yīng)一個(gè)
JSON Schema和一份視圖View組件即可
實(shí)現(xiàn)
首先可視化編輯器需要做到板塊的管理照瘾，這些板塊支持可視化的編輯配置和效果展示匈棘，最終相互組裝為一個(gè)頁面。
每個(gè)板塊我們不可避免的需要一個(gè) View組件 來做展示析命，因?yàn)槊總€(gè)板塊都長得不一樣主卫。板塊配置表單和數(shù)據(jù)校驗(yàn)都通過 JSON Schema 來實(shí)現(xiàn)，然后再通過一個(gè)拖動(dòng)的容器來承載這些板塊以及一些其它的數(shù)據(jù)配置鹃愤。
如下圖：
這樣當(dāng)我們在添加新的板塊時(shí)簇搅，只需要開發(fā)一個(gè) View組件 ，和書寫一份 JSON Schema 來定義數(shù)據(jù)即可软吐。
功能介紹
基于Vue瘩将，依賴 ElementUi、vuedraggable、@lljj/vue-json-schema-form
- 板塊支持配置化
- 支持可添加數(shù)姿现，是否可刪除肠仪，置頂，置底备典，圖標(biāo)配置
- 支持拖動(dòng)或者點(diǎn)擊上下移動(dòng)异旧，復(fù)制刪除等調(diào)整頁面布局
- 支持頁面預(yù)覽模式
- 支持編輯還原數(shù)據(jù)和默認(rèn)板塊數(shù)據(jù)配置
- 視圖組件支持異步加載
- 不支持嵌套組件
- ...
添加新的板塊只需要在 config/tools.js 導(dǎo)入新增的板塊，并且配置好工具欄即可提佣，如：
import * as componentPackFlashSaleGoodsList from '../viewComponents/FlashSaleGoodsList';
const tools = [
{
groupName: '圖文類',
componentList: [{
// 比如這里添加新增的模塊
title: '秒殺商品', // 板塊標(biāo)題
maxNum: 3, // 最多可添加次數(shù)
icon: 'el-icon-picture', // 工具欄圖標(biāo)類名
componentPack: componentPackFlashSaleGoodsList, // 重點(diǎn)是這個(gè)當(dāng)前板塊的組件包
additional: {
bottomDisplay: true, // 是否置底顯示
topDisplay: true, // 是否置頂顯示
unRemove: true // 是否為不可移除
}
}]
}
]
新增板塊文件結(jié)構(gòu)如下：( viewComponents/FlashSaleGoodsList/index.js 這里對(duì)應(yīng)上面工具欄配置導(dǎo)入的組件包文件)
import propsSchema from './schema.json';
import uiSchema from './uiSchema.js';
import errorSchema from './errorSchema.js';
// 這里可以異步導(dǎo)入
const View = () => import('./View.vue');
const NAME = propsSchema.id;
const componentViewName = `${NAME}View`;
export {
propsSchema, // JSON Schema 定義數(shù)據(jù)結(jié)構(gòu)和生成表單 vue-json-schema-form 參數(shù)
componentViewName, // 視圖View組件name吮蛹，需要自己保持唯一
View, // 視圖View組件
uiSchema, // uiSchema 輔助增強(qiáng)表單樣式 不必須 vue-json-schema-form 參數(shù)
errorSchema, // 輔助增強(qiáng)表單校驗(yàn)錯(cuò)誤提示 不必須 vue-json-schema-form 參數(shù)
// customRule, // 自定義的校驗(yàn)規(guī)則 vue-json-schema-form 參數(shù) （需要更多的vue-json-schema-form 參數(shù)參數(shù)可自己添加）
};
導(dǎo)出模塊解釋如下：
-
propsSchema：requiredJSON Schema配置，必須包含一個(gè)id的屬性拌屏，并且要保證唯一潮针，在保存和編輯數(shù)據(jù)時(shí)用來標(biāo)識(shí)當(dāng)前組件。傳遞給vue-json-schema-form生成表單槐壳； -
componentViewName：required板塊View組件名然低，唯一帅韧，建議通過 id +View拼接满哪，只是為了在注冊組件時(shí)的組件名，其實(shí)我也可以幫你生成任柜，但是我沒有枫笛； -
View：requiredrequired板塊View組件吨灭，需要異步導(dǎo)入就 () => import('./xxx.vue')，View 組件必須包含一個(gè)名為formData的props接受當(dāng)前表單數(shù)據(jù)刑巧； -
uiSchema： 傳遞給vue-json-schema-form生成表單喧兄，用于增強(qiáng)生成表單的樣式，可選啊楚； -
errorSchema： 傳遞給vue-json-schema-form生成表單吠冤，用于增強(qiáng)表單的校驗(yàn)提示信息 -
customRule： 傳遞給vue-json-schema-form生成表單，用于自定義校驗(yàn)表單數(shù)據(jù)
如果需要更多 vue-json-schema-form 參數(shù)可直接在 packages/demo/src/vue-editor/views/editor/Editor.vue 渲染 VueElementForm 組件時(shí)添加即可恭理。
- 新增板塊可參見
/packages/demo/src/vue-editor/views/editor/viewComponents內(nèi)現(xiàn)有板塊- 工具欄和默認(rèn)數(shù)據(jù)配置在
/packages/demo/src/vue-editor/views/editor/config文件夾內(nèi)
整個(gè)實(shí)現(xiàn)相對(duì)比較簡單拯辙，感興趣的可以花上兩個(gè)小時(shí)看下源碼，歡迎討論提問颜价。
