平台兼容性
仔仔-家居格子 使用说明
可以用在智能家居相关的产品展示上,初步内置了各种自定义属性
先安装此组件,再去需要使用的地方
import zaiLattice from "../../components/zai-lattice";
components:{
zaiLattice
}
然后在界面上
<zai-lattice shadow
progressColor='#ffffff'
progressPercent='15'
title='空调'
num='23'
unit='℃'
@click="latticeClick()"
/>
组件参数:
属性名 | 类型 | 说明 | 默认 |
---|---|---|---|
backgroundColor | String | 格子的背景颜色 | #4F496C |
shadow | Boolean | 是否开启阴影 | false |
progressColor | String | 进度条颜色 | #2086D8 |
progressPercent | Number | 进度条位置 | 0 |
title | string | 格子名称 | 无 |
num | string/Number | 数字 | 0 |
unit | string | 数字单位 | 无 |
type | string | 图标类型,可选"icon"或 "img" | 无 |
icon | string | 字体图标的class名,type为icon时有效 | 无 |
src | string | 文件图片的地址,type为img时有效 | 无 |
iconColor | string | 图标颜色,type为icon时有效 | #A1A0B5 |
unitColor | string | 数字单位颜色 | #A1A0B5 |
numColor | string | 数字颜色 | #ffffff |
titleColor | string | 格子名称颜色 | #EFEEF2 |
size | Number/String | icon图标或图片大小 | 33 |
属性名 | 类型 | 说明 |
---|---|---|
@click | String | 点击事件 |
附加:
示例包里 static
文件夹下的 cz.png
和 icon.css
文件为测试图标文件和字体图标css文件
如果您觉得好用,感谢好评。 如果觉得不好用,欢迎反馈。