-
-
前端小姐姐 小试身手Lv3
发表于2020-5-24 11:47
楼主
这是由6个自定义组件完成的，都是带背景图标文本的自定义组件，下边就来详细介绍下这个实例：
大背景图这个组件其实用我们自带的组件是可以完成的，但我这里自定义了一下，其中可以改变的是左上边距、宽高、背景图以及背景图是否重复，这些都是在基础属性里去改变，基础属性里的展现如下：
主要要提到的是新增了2个属性背景图bgimg、背景图是否重复bgrepeat，
然后再就是js里的内容，贴出来给大家看看
js实现基础属性里可更改背景图以及背景图是否重复
然后标题和下边的4个小块和大背景一样，标题多一点是文本的一些定义。如下图：
然后属性里新增了5个属性文本标题title、背景图bg、标题大小size、标题颜色color、标题是否加粗bold
然后js里内容如下：
然后说下如何实现小块，基础属性如下：
然后属性里新增了8个属性背景图bgimg、小图标tbimg、文字wenzi、文字字体大小wzsize、文字颜色wzcolor、数字shuzi、数字字体大小shusize、数字颜色shucolor
然后js里内容如下：
这样就完成了这个自定义小组件，主要是背景图和标题的改变，大家可以根据需要去改变
