更新记录

1.1.1029（2020-10-29）

优化点击事情，增加支持跳转tabbar页面

1.1.1023（2020-10-23）

1、增加兼容微信小程序，但小程序暂时不支持order排序 2、增加点击事件脚本

说明

简单的Grid宫格组件套，包含Grid、Grid-item两个组件

特性

• 常用的移动端页面宫格布局，提高前端开发效率
• 支持角标红点和字数
• 支持自定义排序
• 同时支持图片图标和字体图标，为保持组件的独立性，已离线整合Vant官网的图标字体，所以组件包大了一丢丢
• 图标字体名称查询https://youzan.github.io/vant/#/zh-CN/icon
• 兼容性 在APP、H5下正常，兼容微信小程序，但小程序不支持order排序
• 没有限制格子总数量，请低调使用，排序范围从-1~25，掂量着用
• 第一次做自定义组件，有不妥的地方欢迎留言，我尽量改善

QQ交流群 1136131487

快速上手

1.main.js全局引入Grid组件

// main.js
import grid from './components/grid/grid.vue'
Vue.component('grid',grid)

import gridItem from './components/grid-item/grid-item.vue'
Vue.component('grid-item',gridItem)

使用方法

在 template 中使用组件

<template>
    <view>
        <view class="title">{{title}}</view>
        <view>
            <grid col="4" title="四栏组名称">
                <grid-item order="1" iconImg="/static/logo.png" url="" text="第一格"></grid-item>
                <grid-item order="0" iconFont="comment" url="" type="tabbar" dot text="dot"></grid-item>
                <grid-item order="3" iconImg="/static/logo.png" url="" text="第三格"></grid-item>
                <grid-item order="2" iconFont="audio" url="" badge="99+" text="badge"></grid-item>
            </grid>
            <grid col="-10" title="最少栏数的效果">
                <grid-item order="1" badge="15" iconImg="/static/logo.png" url="" text="第二格"></grid-item>
                <grid-item order="0" dot iconFont="shop" url="" text="第一格"></grid-item>
            </grid>
            <grid title="不设置栏数的默认效果">
                <grid-item order="1" badge="8" iconImg="/static/logo.png" url="" text="第3格"></grid-item>
                <grid-item order="0" dot iconFont="photo" url="" text="第2格"></grid-item>
                <grid-item order="3" iconImg="/static/logo.png" url="" text="第5格"></grid-item>
                <grid-item order="4" iconFont="scan" url="" text="第6格"></grid-item>
                <grid-item order="-1" iconImg="/static/logo.png" url="" text="第1格"></grid-item>
                <grid-item order="2" iconFont="setting" url="" text="第4格"></grid-item>
            </grid>
            <grid col="7" border="false" title="最多栏数去边线效果">
                <grid-item order="2" badge="99+" iconImg="/static/logo.png" url="" text="第三格"></grid-item>
                <grid-item order="1" dot iconFont="send-gift" url="" text="第二格"></grid-item>
                <grid-item order="0" iconImg="/static/logo.png" url="" text="第一格"></grid-item>
                <grid-item order="3" iconImg="/static/logo.png" url="" text="第五格"></grid-item>
                <grid-item order="4" iconFont="question" url="" text="第四格"></grid-item>
            </grid>
        </view>
    </view>
</template>

API

Grid Props

GridItem Props