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

前端李小白

于 2020-03-26 18:02:39 发布

阅读量3.7k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42268364/article/details/105124497

版权

代码和解释如下：

<!--
      参数                说明                         类型                  默认值
      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></