指标卡组件添加设置行间距属性

     指标卡组件的“值文字大小”设置超过33px后,会导致上方文字和值文字重叠,不好看。本文将介绍,添加设置文字与值间距的属性,修改间距。 


1.克隆指标卡组件 

内置组件不可更改,需要克隆内置组件,修改克隆后的组件。
克隆方法:选择指标卡组件,右键选择克隆,可在自定义组件中找到克隆后的组件。
指标卡组件添加设置行间距属性 

2.添加行间距设置属性

step1:选择克隆后的组件,右键编辑,可查看此组件的代码并修改。
指标卡组件添加设置行间距属性
step2:点击属性,切换到“高级配置”,将下列代码到最后,方便查看属性。
复制代码
  1. {
  2. "desc_zh_TW": "指標值與值之間的間距",
  3. "isedit": true,
  4. "caption_en": "Index name and value spacing",
  5. "defattr_zh_TW": "0px",
  6. "groupname_en": "text",
  7. "desc_zh_CN": "指标值与值之间的间距",
  8. "type": "edit",
  9. "caption_zh_TW": "指標名於值間距",
  10. "groupname_zh_TW": "文本",
  11. "isshow": true,
  12. "caption_zh_CN": "指标名于值间距",
  13. "groupname_zh_CN": "文本",
  14. "name": "textPadding",
  15. "defattr_en": "0px",
  16. "desc_en": "The gap between the indicator value and the value",
  17. "defattr_zh_CN": "0px"
  18. }
指标卡组件添加设置行间距属性
step3:在default.js中添加属性对应的事件,达到调用属性的效果。
相关代码及位置如下:
复制代码
  1. var textPadding = "";


复制代码
  1.      //指标名与值间距
  2. textPadding = cwidget.getProperty("textPadding");
  3. setProperty("textPadding", textPadding, cwidget);



复制代码
  1.  $basedom.find(".zbk-content > div:first-child").css({"margin-bottom": textPadding,"margin-right":""});

复制代码
  1. else if (key === "textPadding") {
  2.         textPadding = value;
  3. //指标值间距
  4.             //布局方式是上下
  5.          $basedom.find(".zbk-content > div:first-child").css({"margin-bottom": value,"margin-right":""});
  6.     }

注意仔细比对,以及括号位置



附件列表

0

文档内容仅供参考
如果您需要解决具体问题,还可以登录亿信社区
在提问求助板块提问,30分钟内帮您解决问题

如果您认为本词条还有待完善,请编辑

上一篇URL传参如何实现

下一篇酷屏市场购买的模板/组件的使用方法

请先登录