sula入門教程
本文適合有react、antd基礎(chǔ)的小伙伴閱讀
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～
一、what sula?
sula 是在螞蟻金服多個生產(chǎn)項目沉淀出來的一套「產(chǎn)品級」配置框架，通過插件化的方式實現(xiàn)了配置的高擴(kuò)展性與高靈活性，并且 sula 通過行為插件的引入，建立了渲染插件與用戶行為的連接，實現(xiàn)了場景式的語義化配置。
在github的sula項目中package.json可以看到如下:
"antd":?"4.3.4"
二、why sula?
sula有5個模板、3種組件
5個模板：
3種組件
Tips：mode有三種模式?
'create'、'edit'、'view'?(默認(rèn) edit)；
create?模式
edit?模式
view?模式
三、簡單的Demo
import?React?from?'react';
import?{?Form?}?from?'sula';
export?default?()?=>?{
??const?fields?=?[
????{
??????name:?'name',
??????label:?'前端早茶',
??????field:?{
????????type:?'input',
????????props:?{
??????????placeholder:?'請輸入',
????????},
??????},
????}????
??];
??return?(
????<>
??????<Form?ref={formRef}?fields={fields}?/>
????
??);
};
效果如下：
Tips:?
沒接觸過sula的小伙伴會說，這么簡單的功能，還要這么多代碼吖。
其實這些代碼都是cv的。sula提供了一個在線配置的開源項目，我們可以在上面配好頁面，然后把配置的代碼拷貝到自己的項目里面，很方便。
在線配置好我們需要的組件，效果如下：
然后查看配置的代碼，效果如下：
sula 的在線配置化工具 https://cook-sula.vercel.app/#/
四、如何使用sula
Step 1:? 創(chuàng)建umi項目
mkdir?sula-use?&&?cd?sula-use
yarn?create?@umijs/umi-app?&&?npm?i?&&?npm?start
瀏覽器打開http://localhost:8000/，就可以看到歡迎頁面。
Step 2:? 安裝 sula 和 umi-plugin-sula
npm?i?sula?umi-plugin-sula?--save
Step 3:??在 .umirc.js 中啟用 umi-plugin-sula 插件
export?default?defineConfig({
??sula:?{
??????locale:?{
??????????default:?'zh-CN'??????
??????}??
??},
})
Step 4:??在 src 目錄下新建 global.js 并導(dǎo)入 antd 主題并注冊項目中所需要 icon
//?global.js
import?{?Icon?}?from?'sula';
import?{?DeleteOutlined?}?from?'@ant-design/icons';
import?'antd/dist/antd.less';
//?注冊所需的icon
Icon.iconRegister({
??delete:?DeleteOutlined,
});Tips: 其實我們也可以把sula項目引入到自己項目，不當(dāng)成插件引入
到這里就可以開始使用sula了。?
五、國際化與多語言
//?默認(rèn)中文展示
export?default?{
??sula:?{},
??locale:?{
????default:?'zh-CN',
????antd:?true,
????baseNavigator:?false,
??},
};六、圖表
七、ctx與表單依賴
ctx是什么？
sula 內(nèi)所有配置屬性，均支持配置方法，ctx 為該方法的第一個參數(shù)，配置給不同屬性時，ctx 內(nèi)容會有差異
const?fields?=?[
??{
????name:?'name',
????label:?'姓名',
????field:?(ctx)?=>?{
??????return?<Input?disabled={ctx.mode?===?'view'}?/>;
????},
??},
];
平時我們在使用sula的時候，如上面的ctx來編寫。
Form
form 實例
history
mode: 表單模式, 支持 'create' | 'view' | 'edit'
disabled: 是否可點(diǎn)擊
source：表單項數(shù)據(jù)源 (select、checkboxgroup等支持source)
results、 result：鏈?zhǔn)讲僮鞯纳弦粋€行為 promise 返回的結(jié)果
Table
table 實例
dataSource: table 數(shù)據(jù)源
history
index: 索引
record: 當(dāng)前行數(shù)據(jù)
text: 當(dāng)前行的值
params: 請求參數(shù)
data: 接口返回數(shù)據(jù)
result、results: 鏈?zhǔn)讲僮鞯纳弦粋€行為 promise 返回的結(jié)果
模板字符串
sula 定義的模版字符串?'#{}'?用于對 ctx 的解析
表單依賴
有些時候，有些業(yè)務(wù)需求需要字段之間是有所關(guān)聯(lián)與依賴的。這個時候就需要我們使用到dependency。
import?React?from?'react';
import?{?Form?}?from?'sula';
export?default?()?=>?{
??const?config?=?{
????fields:?[
??????{
????????name:?'weixin',
????????label:?'微信號',
????????field:?{
??????????type:?'input',
??????????props:?{
????????????placeholder:?'請輸入',
??????????},
????????},
????????dependency:?{
??????????disabled:?{
????????????relates:?['name'],
????????????inputs:?[['feng']],
????????????output:?true,
????????????defaultOutput:?false,
??????????},
????????},
??????}
????],
??};
??return?<Form?{...config}?/>;
};
效果如下：
八、最后
sula有它的優(yōu)勢，也有它的不足，廣東靚仔列舉了幾點(diǎn)不足：
因此項目中使用sula與否，要按實際情況取舍。
面試題庫推薦
關(guān)注我，一起攜手進(jìn)階
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～