该宏示例在 V10.5上 验证通过 本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配(如使用功能不一致,或多个宏代码冲突等),需根据实际需求开发代码。 |
1. 示例效果
预期效果:设置组件的自定义背景图片样式和自定义边框样式
效果如下:
把下面宏代码复制到代码区域;
function main(page: IPage, portlet: IEChartsPortlet) { // 1、调用宏接口:清除掉缓存样式 portlet.removeCss() // 2、获取指定富文本组件:这里作为一个图片容器 let portlets:IStaticTextPortlet[] = page.getPortletsByTitle('文本1') let textPortlet: IStaticTextPortlet = portlets[0] // 3、可以设置默认图片 let imgurl:any = '../vision/writeCustomBgImg.jsp?theType=Page_Head_Logo_Big' // 4、上传图片到富文本组件中,通过宏获取自定义图片作为背景 if (textPortlet) { let dom = textPortlet.getHtmlContent() let img = dom.querySelector('img') if (img) { imgurl = img.getAttribute('src') } } // 5、组件背景的dom选择器 let container: CssSelector = '.theme__portlet-background' let content: CssObject = { // 设置背景颜色 'background-image': `linear-gradient(to top, #c79081 0%, #dfa579 100%) !important`, // 设置图片边框 'border': '30px solid transparent !important', 'border-image': `url(${imgurl}) 40 10 round !important` } // 6、调用宏接口:设置组件的自定义背景图片样式和自定义边框样式 portlet.appendCss(container, content) } |
示例主要使用的是IEChartsPortlet对象下的appendCss方法,点击查看API详情