Grid宫格

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-grids": "/miniprogram_npm/vtuweapp/grid/grids/vtu-grids",
    3.     "vtu-grid": "/miniprogram_npm/vtuweapp/grid/grid/vtu-grid"
    4. }
    5.

    代码演示

    自定义颜色

    1. <vtu-grids col="4">
    2.   <vtu-grid label="图片" icon="iconfont icon-tupian1" icon-color="red" bind:click="click" data-label="aa" ></vtu-grid>
    3.   <vtu-grid label="清除" icon="iconfont icon-qingkong" icon-color="orange" bind:click="click" data-label="bb" ></vtu-grid>
    4.   <vtu-grid label="收藏" icon="iconfont icon-xihuanfill" icon-color="skyblue" bind:click="click" data-label="cc" ></vtu-grid>
    5.   <vtu-grid label="上传" icon="iconfont icon-shangchuan" icon-color="blue" bind:click="click" data-label="dd" ></vtu-grid>
    6.   <vtu-grid label="图片" icon="iconfont icon-tupian1" icon-color="#7e35bd" bind:click="click" data-label="ee" ></vtu-grid>
    7.   <vtu-grid label="清除" icon="iconfont icon-sousuo" icon-color="#9075fc" bind:click="click" data-label="gg" ></vtu-grid>
    8.   <vtu-grid label="收藏" icon="iconfont icon-biaoxingfill" icon-color="#1abf28" bind:click="click" data-label="er" ></vtu-grid>
    9.   <vtu-grid label="上传" icon="iconfont icon-yuanxingxuanzhongfill" icon-color="#fc973d" bind:click="click" data-label="sd" ></vtu-grid>
    10. </vtu-grids>
    11.

    基础用法

    1. <vtu-grids col="5" border icon-color="orange" item-class="itemClass">
    2.   <vtu-grid label="图片" icon="iconfont icon-tupian1" badge_value="15"></vtu-grid>
    3.   <vtu-grid label="清除" icon="iconfont icon-qingkong"></vtu-grid>
    4.   <vtu-grid label="收藏" icon="iconfont icon-xihuanfill" badge_value="95" badge_max="50"></vtu-grid>
    5.   <vtu-grid label="上传" icon="iconfont icon-shangchuan"></vtu-grid>
    6.   <vtu-grid label="图片" icon="iconfont icon-tupian1"></vtu-grid>
    7.   <vtu-grid label="清除" icon="iconfont icon-sousuo"></vtu-grid>
    8.   <vtu-grid label="收藏" icon="iconfont icon-biaoxingfill" badge_is-dot></vtu-grid>
    9.   <vtu-grid label="上传" icon="iconfont icon-yuanxingxuanzhongfill"></vtu-grid>
    10.   <vtu-grid label="图片" icon="iconfont icon-tupian1"></vtu-grid>
    11.   <vtu-grid label="清除" icon="iconfont icon-sousuo"></vtu-grid>
    12. </vtu-grids>
    13.

    自定义大小

    1. <vtu-grids col="3" icon-color="red" >
    2.   <vtu-grid label="图片" icon="iconfont icon-tupian1" icon-size="30px"></vtu-grid>
    3.   <vtu-grid label="清除" icon="iconfont icon-qingkong" icon-size="30px"></vtu-grid>
    4.   <vtu-grid label="收藏" icon="iconfont icon-xihuanfill" icon-size="30px"></vtu-grid>
    5.   <vtu-grid label="上传" icon="iconfont icon-shangchuan" icon-size="30px"></vtu-grid>
    6.   <vtu-grid label="禁用" icon="iconfont icon-yemian-copy-copy" icon-size="30px" disabled bind:click="click" data-label="sd"></vtu-grid>
    7.   <vtu-grid label="清除" icon="iconfont icon-sousuo" icon-size="30px"></vtu-grid>
    8. </vtu-grids>
    9.

    自定义图片

    1. <vtu-grids col="3">
    2.     <vtu-grid label="图片" img-src="https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/1.png"></vtu-grid>
    3.     <vtu-grid label="图片" img-src="https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/2.png"></vtu-grid>
    4.     <vtu-grid label="图片" img-src="https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/3.png"></vtu-grid>
    5. </vtu-grids>
    6.

    自定义图片大小

    1. <vtu-grids col="4" img-width="30px">
    2.     <vtu-grid label="图片" img-src="https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/1.png"></vtu-grid>
    3.     <vtu-grid label="图片" img-src="https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/2.png"></vtu-grid>
    4.     <vtu-grid label="图片" img-src="https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/3.png"></vtu-grid>
    5.     <vtu-grid label="图片" img-src="https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/4.png"></vtu-grid>
    6. </vtu-grids>
    7.

    组件参数

    Grids Props

    参数说明类型默认值必填
    col列数Number3否
    border显示边框Boolean-否
    icon-color图标颜色String-否
    icon-size图标大小String-否
    font-color文本颜色Array-否
    font-size字体大小String-否
    img-mode图片裁剪、缩放的模式StringaspectFill否
    img-width图片宽度String-否
    img-height图片高度String-否

    Grid Props

    参数说明类型默认值必填
    label文本值String-否
    icon-color图标颜色String-否
    icon-size图标大小String-否
    font-color字体颜色String-否
    font-size字体大小String-否
    img-src图片路径String-否
    img-width图片宽度String-否
    img-height图片高度String-否
    hidden是否隐藏Boolean-否
    disabled是否禁用Boolean-否

    Events

    方法名说明参数返回值
    bind:click点击事件-绑定的参数对象及索引

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Grid 宫格 - 图1