更新记录

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

属性名 类型 默认值 可选值 说明
col Number,String 3 2~5 宫格列数,可填任意数,<2则=2,>5则=5
border Number,String true false,0 是否显示边框
title String -   Grid组的标题

GridItem Props

属性名 类型 默认值 可选值 说明
text String - - 文字
iconImg String - - 图片图标
iconFont String - - 字体图标
type String - tabbar、back 跳转tabbar页面用
url String - - 跳转链接
hoverClass String - - 点击时的样式类
order Number,String - -1~25 宫格排序,数字越小越靠前,不支持小程序
dot Boolean - - 红点角标
badge Number,String - - 数字角标

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问