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