溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求前景
前端組件是可復用的，那么復用前端組件時從后端讀取的數據源同樣也需要可復用（后端api也要是配置化的方式進行），前端需要提供配置項給后端進行動態配置生成api。
具體實現流程
名詞解析
mock 規范約束
使用的ts的 interface 進行編譯前校驗，所有的組件接收的 mock 結構，都必須是該 Interface 的實現
解析器
將mock打平成 key,value 結構的工具
eg.
interface I_EchartOption {
series: {
data: {
name: string;
value: numberOrString;
unit?: string;
}[];
name?: string;
type: "pie";
}; // 數據集配置
}
const mock:I_EchartOption = {
series: [
{
type: "pie",
data: [
{
name: "中藥",
value: "2630",
unit: "家",
_viewData:{ // 通過組合的自定義屬性
}
},
]
}
]
}
const parsingMock=(mock:I_EchartOption):T_formInfo=>{}
parsingMock(mock)
// 返回一個 Mock 描述，見下文
mock 描述
mock 描述，功能有兩個
type T_formInfo = { // mock 描述的接口
key: string, // 值得路徑嵌套
value: string, // 解析出來的value
build_component: string, // 承載改配置項的表單組件
build_option: { // 傳遞給表單組件的參數
options: any[], // 通過請求后端，讓后端進行填充
[key: string]: any
},
}
[
{
"key": "series.0.data",
"build_component": "seriesData",
"build_option": {
"options":[]
"dataLength": 1
},
"formValue": "",
},
{
"key": "series.0.data.0._viewData",
"build_label": "副指標series.0.data.0._viewData",
"build_component": "viewData",
"build_option": {
"options":[]
"isShowTitle": false,
"_viewDataMaxLength": 1
},
},
{
"key": "series.0.type",
"value": "pie"
}
]
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
