更新记录
1.1.0(2024-10-31)
下载此版本
1、基本功能实现:实现了一个基本的左对齐网格布局组件,能够根据传入的数据数组生成相应的网格项,并自动换行。
2、属性配置:增加了items和itemsPerRow两个属性,分别用于传入数据数组和配置每行显示的元素数量
3、插槽支持:增加了对插槽的支持,允许用户自定义每个网格项的内容。通过使用插槽,用户可以在父组件中定义每个网格项的模板,从而提供更大的灵活性和可定制性。
4、样式优化:优化了组件的CSS样式,确保所有子元素左对齐,并且自动换行。通过设置gap属性来调整元素之间的间距,使布局更加美观和一致。
5、动态列数:通过计算属性gridTemplateColumns动态设置每行的列数,使得组件更加灵活,可以根据传入的itemsPerRow属性值来配置每行显示的元素数量。
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.08 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
1、组件引入使用
import GridLeft from "@/components/gird-left/gird-left.vue"
2、页面使用
{{item}}
3、数据
data(){
return{
items: ['1','2','3','4'],
}
}