酷屏自定义小组件实例分享2

1635
1

前端小姐姐 小试身手Lv3

发表于2020-5-24 11:47

楼主
截图202005241058214442.png
这是由6个自定义组件完成的,都是带背景图标文本的自定义组件,下边就来详细介绍下这个实例:

大背景图这个组件其实用我们自带的组件是可以完成的,但我这里自定义了一下,其中可以改变的是左上边距、宽高、背景图以及背景图是否重复,这些都是在基础属性里去改变,基础属性里的展现如下:
截图202005241117456927.png
主要要提到的是新增了2个属性背景图bgimg、背景图是否重复bgrepeat,
截图202005241120416996.png
然后再就是js里的内容,贴出来给大家看看
截图202005241125359198.png
截图202005241125598957.png
js实现基础属性里可更改背景图以及背景图是否重复

然后标题和下边的4个小块和大背景一样,标题多一点是文本的一些定义。如下图:
截图202005241133492119.png

然后属性里新增了5个属性文本标题title、背景图bg、标题大小size、标题颜色color、标题是否加粗bold
截图202005241135012239.png

然后js里内容如下:
截图202005241138089976.png 截图202005241138239618.png 截图202005241138503126.png

然后说下如何实现小块,基础属性如下:
截图202005241140242737.png

然后属性里新增了8个属性背景图bgimg、小图标tbimg、文字wenzi、文字字体大小wzsize、文字颜色wzcolor、数字shuzi、数字字体大小shusize、数字颜色shucolor
截图202005241141076410.png

然后js里内容如下:
截图202005241144365241.png 截图202005241144566020.png

这样就完成了这个自定义小组件,主要是背景图和标题的改变,大家可以根据需要去改变

最近看过此主题的会员

shqx

lii_chen1234

迷途小生

百事不可乐

chestnut

jqnanjiong

wangbowen

一一

adhzh

小亿

zwz5811

兰传龙

简单点2018

Delia

15866325070

奡羽

郑文华

1个回答

只看楼主

程序小哥哥 数据达人Lv4

发表于2020-5-24 12:41

只看该作者

取消 关注该作者的回复

沙发

厉害了

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流

版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号