使用vue封装一个宫格组件，可以自定义列数，间距

作者：小桥流水78 | 2024-07-05 18:56:04

踩

使用vue封装一个宫格组件

代码和解释如下：

<!--
      参数                说明                         类型                  默认值
      girdData       宫格里面的内容                    Array                  []
      columnNum         列数                          String                  4
      gutter          格子之间的间距，请带单位传入      String                  0
                      如：px、vw
      gutterBottom    格子上下的间距，请带单位传入      String                  0
                      如：px、vw
使用例子:
    <gird :girdData="girdData" :gutter="'1.563vw'" :gutterBottom="'1.563vw'" :columnNum="'4'">
      <template #content="acceptProps">
        <div class="card">
          <div class="icon">
            <i class="iconfont" :class="acceptProps.item.icon" />
          </div>
          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/790756