You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.3 KiB
52 lines
1.3 KiB
3 years ago
|
# 我们为什么要设计el这个属性
|
||
|
|
|
||
|
|
我们在使用布局组件的时候,有时候会在item中直接写lgap,hgap,vgap之类的属性,通常最终的页面结果是符合我们的预期的,但是当items中的子组件同时接收lgap作为props的时候,结果就变了,通常会出现间距变成两倍了的情况
|
||
|
|
|
||
|
|
```
|
||
|
|
BI.createWidget({
|
||
|
|
type: "bi.left",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: "bi.label",
|
||
|
|
lgap: 10,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
出现这种情况是因为布局组件会根据itemw中元素的gap属性设置margin值,而子组件也会读取gap属性在组件内部逻辑值使用这个值,因此出现了双倍间距.
|
||
|
|
|
||
|
|
采用el做隔离,可以避免这种情况,这时候子组件bi.label并没有lgap属性,但是布局组件依然可以正确获取items子元素的lgap属性
|
||
|
|
|
||
|
|
```
|
||
|
|
BI.createWidget({
|
||
|
|
type: "bi.left",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
el: {
|
||
|
|
type: "bi.label",
|
||
|
|
text: "测试",
|
||
|
|
},
|
||
|
|
lgap: 10,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
为了简化写法,FineUI新增了下划线+gap属性,如_hgap,_vgap,_lgap等,同样起到了隔离作用
|
||
|
|
|
||
|
|
```
|
||
|
|
BI.createWidget({
|
||
|
|
type: "bi.left",
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: "bi.label",
|
||
|
|
_lgap: 10,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
```
|