1.0.3

.hbuilderx/launch.json

+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+            "type": "uniCloud",
+            "default": {
+                "launchtype": "local"
+            }
+        }
+    ]
+}

App.vue

+<script>
+	export default {
+		onLaunch: function() {
+			console.log('App Launch')
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>
+
+<style>
+	/*每个页面公共css */
+	/* colorui */
+	@import "colorui/main.css";
+	@import "colorui/icon.css";
+</style>

colorui/animation.css

+/* 
+  Animation 微动画  
+  基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
+ */
+
+/* css 滤镜 控制黑白底色gif的 */
+.gif-black{  
+  mix-blend-mode: screen;  
+}
+.gif-white{  
+  mix-blend-mode: multiply; 
+}
+
+
+/* Animation css */
+[class*=animation-] {
+    animation-duration: .5s;
+    animation-timing-function: ease-out;
+    animation-fill-mode: both
+}
+
+.animation-fade {
+    animation-name: fade;
+    animation-duration: .8s;
+    animation-timing-function: linear
+}
+
+.animation-scale-up {
+    animation-name: scale-up
+}
+
+.animation-scale-down {
+    animation-name: scale-down
+}
+
+.animation-slide-top {
+    animation-name: slide-top
+}
+
+.animation-slide-bottom {
+    animation-name: slide-bottom
+}
+
+.animation-slide-left {
+    animation-name: slide-left
+}
+
+.animation-slide-right {
+    animation-name: slide-right
+}
+
+.animation-shake {
+    animation-name: shake
+}
+
+.animation-reverse {
+    animation-direction: reverse
+}
+
+@keyframes fade {
+    0% {
+        opacity: 0
+    }
+
+    100% {
+        opacity: 1
+    }
+}
+
+@keyframes scale-up {
+    0% {
+        opacity: 0;
+        transform: scale(.2)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes scale-down {
+    0% {
+        opacity: 0;
+        transform: scale(1.8)
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes slide-top {
+    0% {
+        opacity: 0;
+        transform: translateY(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes slide-bottom {
+    0% {
+        opacity: 0;
+        transform: translateY(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+@keyframes shake {
+
+    0%,
+    100% {
+        transform: translateX(0)
+    }
+
+    10% {
+        transform: translateX(-9px)
+    }
+
+    20% {
+        transform: translateX(8px)
+    }
+
+    30% {
+        transform: translateX(-7px)
+    }
+
+    40% {
+        transform: translateX(6px)
+    }
+
+    50% {
+        transform: translateX(-5px)
+    }
+
+    60% {
+        transform: translateX(4px)
+    }
+
+    70% {
+        transform: translateX(-3px)
+    }
+
+    80% {
+        transform: translateX(2px)
+    }
+
+    90% {
+        transform: translateX(-1px)
+    }
+}
+
+@keyframes slide-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
+
+@keyframes slide-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%)
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0)
+    }
+}
\ No newline at end of file

colorui/components/cu-custom.vue

+<template>
+	<view>
+		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
+			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
+				<view class="action" @tap="BackPage" v-if="isBack">
+					<text class="cuIcon-back"></text>
+					<slot name="backText"></slot>
+				</view>
+				<view class="content" :style="[{top:StatusBar + 'px'}]">
+					<slot name="content"></slot>
+				</view>
+				<slot name="right"></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				StatusBar: this.StatusBar,
+				CustomBar: this.CustomBar
+			};
+		},
+		name: 'cu-custom',
+		computed: {
+			style() {
+				var StatusBar= this.StatusBar;
+				var CustomBar= this.CustomBar;
+				var bgImage = this.bgImage;
+				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
+				if (this.bgImage) {
+					style = `${style}background-image:url(${bgImage});`;
+				}
+				return style
+			}
+		},
+		props: {
+			bgColor: {
+				type: String,
+				default: ''
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: false
+			},
+			bgImage: {
+				type: String,
+				default: ''
+			},
+		},
+		methods: {
+			BackPage() {
+				uni.navigateBack({
+					delta: 1
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

common/data/data.js

+/**
+ * 目录的宫格索引
+ */
+
+module.exports = {
+	current_list: [{
+		title: '成员管理',
+		cur: 'applications',
+		bgColor: '', // 背景颜色
+		color: 'blue',
+		title_show: false,
+		showAll: false,
+		colNumber: 5, // 显示的列数
+		iconsList: [{
+				cuIcon: 'group_fill',
+				color: 'blue',
+				name: '1',
+			},
+			{
+				cuIcon: 'friendadd',
+				color: 'yellow',
+				name: '2',
+				exec: 'add'
+			},
+			{
+				cuIcon: 'friendaddfill',
+				color: 'green',
+				name: '3',
+				exec: 'invite'
+			},
+			{
+					cuIcon: 'group_fill',
+					color: 'red',
+					name: '4',
+				},
+				{
+					cuIcon: 'friendadd',
+					color: 'orange',
+					name: '5',
+					exec: 'add'
+				},
+				{
+					cuIcon: 'friendaddfill',
+					color: 'purple',
+					name: '6',
+					exec: 'invite'
+				},
+			{
+					cuIcon: 'group_fill',
+					color: 'pink',
+					name: '7',
+				},
+				{
+					cuIcon: 'friendadd',
+					color: 'cyan',
+					name: '8',
+					exec: 'add'
+				},
+				{
+					cuIcon: 'friendaddfill',
+					color: 'blue',
+					name: '9',
+					exec: 'invite'
+				},
+			{
+					cuIcon: 'group_fill',
+					color: 'blue',
+					name: '10',
+				},
+				{
+					cuIcon: 'friendadd',
+					color: 'blue',
+					name: '11',
+					exec: 'add'
+				},
+				{
+					cuIcon: 'friendaddfill',
+					color: 'blue',
+					name: '12',
+					exec: 'invite'
+				},
+			
+		]
+	}],
+	system_list: [{
+			title: '成员管理',
+			cur: 'applications',
+			bgColor: 'bg-blue light', // 背景颜色
+			color: 'blue',
+			title_show: false,
+			showAll: false,
+			colNumber: 3, // 显示的列数
+			iconsList: [{
+					cuIcon: 'group_fill',
+					color: 'blue',
+					name: '组织机构',
+					url: '/pages/toUrl/toUrl'
+				},
+				{
+					cuIcon: 'friendadd',
+					color: 'blue',
+					name: '无URL',
+					exec: 'add'
+				},
+				{
+					cuIcon: 'friendaddfill',
+					color: 'blue',
+					name: '无Url',
+					exec: 'invite'
+				},
+			]
+		},
+		{
+			title: '基础数据',
+			cur: 'basic',
+			bgColor: '', // 背景颜色
+			color: 'blue',
+			title_show: true,
+			showAll: false,
+			colNumber: 5, // 显示的列数
+			iconsList: [{
+					cuIcon: 'text',
+					color: 'yellow',
+					name: '基本信息',
+					url: '/pages/toUrl/toUrl'
+				},
+				{
+					cuIcon: 'peoplelist',
+					color: 'blue',
+					name: '员工管理',
+					url: '/pages/toUrl/toUrl'
+				},
+
+			]
+		}, {
+			title: '产品目录',
+			cur: 'goods',
+			bgColor: '', // 背景颜色
+			color: 'blue',
+			title_show: true,
+			showAll: false,
+			colNumber: 5, // 显示的列数
+			iconsList: [{
+					cuIcon: 'list',
+					color: 'yellow',
+					name: '分类',
+					url: '/pages/toUrl/toUrl'
+				},
+				{
+					cuIcon: 'goodsnew',
+					color: 'blue',
+					name: '型号',
+					url: '/pages/toUrl/toUrl'
+				},
+				{
+					cuIcon: 'shake',
+					color: 'olive',
+					name: '设备',
+					url: '/pages/toUrl/toUrl'
+				},
+				{
+					cuIcon: 'questionfill',
+					color: 'yellow',
+					name: '常见问题',
+					url: '/pages/toUrl/toUrl'
+				}
+			]
+		},
+		{
+			title: '权限管理',
+			cur: 'goods',
+			bgColor: '', // 背景颜色
+			color: 'blue',
+			title_show: true,
+			showAll: false,
+			colNumber: 5, // 显示的列数
+			iconsList: [{
+				cuIcon: 'goodsfill',
+				color: 'red',
+				name: '权限设置',
+				url: '/pages/toUrl/toUrl'
+			}]
+		}
+	],
+}

main.js

+import Vue from 'vue'
+import App from './App'
+
+Vue.config.productionTip = false
+
+App.mpType = 'app'
+
+const app = new Vue({
+    ...App
+})
+app.$mount()

manifest.json

+{
+    "name" : "luyj-grid-link-app",
+    "appid" : "__UNI__F52211E",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "wxe41256ffb86e9b9c",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    }
+}

pages.json

+{
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "宫格"
+			}
+		}
+	    ,{
+            "path" : "pages/toUrl/toUrl",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "luyj-grid-link方法",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	}
+}

pages/index/index.vue

+<template>
+	<view >
+		<luyj-grid-link :list="list" @gridExc="clickGrid"></luyj-grid-link>
+	</view>
+</template>
+
+<script>
+	import data from '@/common/data/data.js';	// 数据
+	export default {
+		data() {
+			return {
+				list : data.system_list
+			}
+		},
+		onLoad() {
+			
+		},
+		methods: {
+			clickGrid : function(e){
+				console.log("点击宫格",e.currentTarget.dataset.exec);
+			}
+		}
+	}
+</script>
+
+<style>
+	
+</style>

pages/toUrl/toUrl.vue

+<template>
+	<view>
+		<view>跳转到的新页面</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

uni.scss

+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:24rpx;
+$uni-font-size-base:28rpx;
+$uni-font-size-lg:32rpx;
+
+/* 图片尺寸 */
+$uni-img-size-sm:40rpx;
+$uni-img-size-base:52rpx;
+$uni-img-size-lg:80rpx;
+
+/* Border Radius */
+$uni-border-radius-sm: 4rpx;
+$uni-border-radius-base: 6rpx;
+$uni-border-radius-lg: 12rpx;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 10px;
+$uni-spacing-row-base: 20rpx;
+$uni-spacing-row-lg: 30rpx;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 8rpx;
+$uni-spacing-col-base: 16rpx;
+$uni-spacing-col-lg: 24rpx;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:40rpx;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:36rpx;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:30rpx;
\ No newline at end of file

uni_modules/luyj-grid-link/changelog.md

+## 1.0.3（2021-08-07）
+重新上传说明
+## 1.0.2（2021-08-07）
+完善宫格的说明，添加全部/折叠方法
+## 1.0.1（2021-08-05）
+简单说明，并上传示例项目。
+## 1.0.0（2021-07-29）
+初始化，暂无说明

uni_modules/luyj-grid-link/components/luyj-grid-link/luyj-grid-link.vue

+<template>
+	<view>
+		<view v-for="(item , i) in tabber_list" :key="i">
+			<!-- 标题 -->
+			<view v-if="item.iconsList.length > 0 && item.title_show" class="cu-bar bg-white solid-top ">
+				<view class="action">
+					<text class="cuIcon-title " :class="'text-'+item.color"></text> {{ item.title}}
+				</view>
+			</view>
+			<!-- 宫格 -->
+			<view v-if="item.iconsList.length > 0" class="cu-list grid no-border solid-bottom "
+			:class="'col-' + item.colNumber  +  ' ' + item.bgColor"
+				 :data-cur="item.cur">
+				<!-- 总宫格数小于等于item.colNumber*2 || 总宫格大于item.colNumber*2 ， index < item.colNumber*2 -1-->
+				<view class="cu-item " v-for="(icon,index) in item.iconsList" :key="index"
+					v-if="(item.iconsList.length <= item.colNumber*2) || (item.iconsList.length > item.colNumber*2 && index < item.colNumber*2 -1)"
+					@tap="navigateTo" :data-url="icon.url" :data-exec="icon.exec">
+					<view :class="['cuIcon-' + icon.cuIcon,'text-' + icon.color]">
+					</view>
+					<text>{{icon.name}}</text>
+				</view>
+
+				<!-- 总宫格大于item.colNumber*2 ，index > item.colNumber*2-1 -->
+				<view class="cu-item " v-for="(icon,index) in item.iconsList" :key="index"
+				v-if="item.iconsList.length > item.colNumber*2 && index >= item.colNumber*2 -1 && item.showAll"
+					@tap="navigateTo" :data-url="icon.url">
+					<view :class="['cuIcon-' + icon.cuIcon,'text-' + icon.color]">
+					</view>
+					<text>{{icon.name}}</text>
+				</view>
+				<!-- 全部或折叠按钮 -->
+				<view v-if="item.iconsList.length >item.colNumber*2" class="cu-item" :data-cur="item.cur"
+					@click="showAllGrid">
+					<view class=" text-blue" :class="item.showAll ? 'cuIcon-fold' : 'cuIcon-apps'">
+					</view>
+					<text>{{ item.showAll ? '折叠' :'全部' }}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+	/**
+	 * 宫格的展示
+	 * @description  依据ColorUI的宫格样式。只要以数组形式传入宫格
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=5746
+	 * @property {Array}  list 列表，用于传递数据（传递每一行宫格对象）
+	 * @event {Function()} gridExc 若对象没有Url属性，点击宫格时传出该宫格的值
+	 */
+	export default {
+		name: 'luyj-grid-link',
+		props:{
+			list: {
+				type : Array,
+				default: new Array
+			}
+		},
+		data(){
+			return{
+				tabber_list : this.list,		// 列表 , 由于参数不可改变值
+			}
+		},
+		created:function(){
+			
+		},
+		methods:{
+			/** 连接到页或执行方法
+			 * @param {Object} e
+			 */
+			navigateTo(e) {
+				var url = e.currentTarget.dataset.url; // 连接的页面
+				if (url != undefined) {
+					// 跳转到页面
+					uni.navigateTo({
+						url: url
+					});
+				} else {
+					var exec = e.currentTarget.dataset.exec;
+					this.$emit("gridExc" ,e);			// 点击某一宫格时执行方法
+				}
+			},
+			/** 展开或折叠当前宫格
+			 * @param {Object} e
+			 */
+			showAllGrid(e) {
+				var cur_grid = e.currentTarget.dataset.cur;
+				// 获取当前列
+				var tabber = this.tabber_list.find(function(item) {
+					return item.cur == cur_grid;
+				})
+				if (tabber != undefined) {
+					tabber.showAll = !tabber.showAll;
+				}
+			},
+		}
+	}
+</script>
+<style>
+</style>

uni_modules/luyj-grid-link/package.json

+{
+  "id": "luyj-grid-link",
+  "displayName": "基于Color UI的宫格展示",
+  "version": "1.0.3",
+  "description": "给予Color UI 的宫格展示，还包含折叠、展开方法。只需要传入数组，即可呈现Color UI例子一样的宫格。",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "color-ui",
+    "",
+    "list",
+    "grid",
+    ""
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "u",
+          "Android Browser": "u",
+          "微信浏览器(Android)": "u",
+          "QQ浏览器(Android)": "u"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "u",
+          "Edge": "u",
+          "Firefox": "y",
+          "Safari": "u"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "u",
+          "百度": "u",
+          "字节跳动": "u",
+          "QQ": "u"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

uni_modules/luyj-grid-link/readme.md

+# luyj-grid-link
+> **组件名：luyj-grid-link**
+> 代码块： `luyj-grid-link`
+
+### 说明
+由于是基于[ColorUI-uniAPP](https://ext.dcloud.net.cn/plugin?id=239)模板，列表下的宫格。为了更专注于页面的数据，我将宫格的代码打包成插件形式。
+
+![alt 宫格](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c07243ab-98a3-4f90-9b4d-2fa60aba2ee9/38647539-c303-4451-a9e3-68ed7abeaabc.png)
+基于Color UI 的宫格的主要功能包括：
+* 按组显示宫格信息
+* 每组可以选择标题是否展示、背景色
+* 超过两行，自动设置折叠/展开的形式。点击：**展开** 或**折叠**按钮显示宫格内容。
+![alt 宫格折叠](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c07243ab-98a3-4f90-9b4d-2fa60aba2ee9/7576e49f-b5e0-4e4e-81f8-dc2cd0942e83.png)
+
+![alt 宫格展开](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-c07243ab-98a3-4f90-9b4d-2fa60aba2ee9/6a7ec0a3-4d42-49fb-97cf-42d31fd08d0a.png)
+### 安装方式
+
+* 本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
+* 本组件的样式基于ColorUI 。所以，若要使用先依照官网下载并下源码解压，复制根目录的 /colorui 文件夹到你的根目录。然后在App.vue 引入关键Css `main.css` `icon.css`。
+
+``` html
+<style>
+    @import "colorui/main.css";
+    @import "colorui/icon.css";
+    @import "app.css"; /* 你的项目css */
+    ....
+</style>
+```
+
+### 基本用法
+
+在 ``template`` 中的使用
+
+```html
+	<luyj-grid-link :list="list" @gridExc="clickGrid"></luyj-grid-link>
+```
+
+这里 `list`对应列表数据;@gridExc,对应没有链接属性时，宫格的执行方法,其中`e.detail.dataset.exec`对应列表中宫格的**`exec`**属性。这里引用了数据：
+
+```javascript
+list: [{
+			title: '成员管理',
+			cur: 'applications',
+			bgColor: 'bg-blue light', // 背景颜色
+			color: 'blue',
+			title_show: false,
+			showAll: false,
+			colNumber: 3, // 显示的列数
+			iconsList: [{
+					cuIcon: 'group_fill',
+					color: 'blue',
+					name: '组织机构',
+					url: '/pages/toUrl/toUrl'
+				},
+				{
+					cuIcon: 'friendadd',
+					color: 'blue',
+					name: '无URL',
+					exec : 'add'
+				},
+				{
+					cuIcon: 'friendaddfill',
+					color: 'blue',
+					name: '无Url',
+					exec: 'invite'
+				},
+			]
+		},
+		{
+			title: '基础数据',
+			cur: 'basic',
+			bgColor: '', // 背景颜色
+			color: 'blue',
+			title_show: true,
+			showAll: false,
+			colNumber: 5, // 显示的列数
+			iconsList: [{
+					cuIcon: 'text',
+					color: 'yellow',
+					name: '基本信息',
+					url: '/pages/toUrl/toUrl'
+				},
+				{
+					cuIcon: 'peoplelist',
+					color: 'blue',
+					name: '员工管理',
+					url: '/pages/toUrl/toUrl'
+				},
+
+			]
+		}, {
+			title: '产品目录',
+			cur: 'goods',
+			bgColor: '', // 背景颜色
+			color: 'blue',
+			title_show: true,
+			showAll: false,
+			colNumber: 5, // 显示的列数
+			iconsList: [{
+					cuIcon: 'list',
+					color: 'yellow',
+					name: '分类',
+					url: '/pages/toUrl/toUrl'
+				},
+				{
+					cuIcon: 'goodsnew',
+					color: 'blue',
+					name: '型号',
+					url: '/pages/toUrl/toUrl'
+				},
+				{
+					cuIcon: 'shake',
+					color: 'olive',
+					name: '设备',
+					url: '/pages/toUrl/toUrl'
+				},
+				{
+					cuIcon: 'questionfill',
+					color: 'yellow',
+					name: '常见问题',
+					url: '/pages/toUrl/toUrl'
+				}
+			]
+		},
+		{
+			title: '权限管理',
+			cur: 'goods',
+			bgColor: '', // 背景颜色
+			color: 'blue',
+			title_show: true,
+			showAll: false,
+			colNumber: 5, // 显示的列数
+			iconsList: [{
+				cuIcon: 'goodsfill',
+				color: 'red',
+				name: '权限设置',
+				url: '/pages/toUrl/toUrl'
+			}]
+		}
+	], 
+```
+
+### 属性说明
+
+|属性名					|类型			|默认值		|说明																
+|:-:					|:-:			|:-:		|:-:																
+| list					|Arrary			|[]			|宫格组，其中里面的每一组对象表示每一组宫格的展示
+
+#### list 内对象的参数说明
+
+|属性名					|类型			|是否必填		|说明
+|:-:					|:-:			|:-:			|:-:
+|title					|String			|是				|标题
+|cur					|String			|是				|当前宫格组的名称（每组不能重名）
+|bgColor				|String			|是				|宫格的背景颜，(可以为''),参考Color UI的样式
+|color					|String			|是				|标题字体的颜色
+|title_show				|Boolean		|是				|是否显示标题
+|showAll				|Boolean		|是				|是否默认展开所有宫格
+|colNumber				|Number			|是				|每行展示宫格的列数
+|iconsList				|Array			|是				|宫格的图标列表
+
+##### iconsList 内对象的参数说明
+
+|属性名					|类型			|是否必填		|说明
+|:-:					|:-:			|:-:			|:-:
+|cuIcon					|String			|是				|图标名称，参考ColorUI库
+|color					|String			|是				|宫格颜色
+|name					|String			|是				|名称
+|url					|String			|否				|宫格默认的跳转路径
+|exec					|String			|否				|存储参数（无Url时），宫格的参数。点击宫格是，@gridExc传递参数
+
+### 事件说明
+| 事件名		| 说明		|	返回参数 
+| :-:			| :-:		| :-:	
+|@gridExc		| 宫格无跳转路径时，返回参数，用于区分宫格，执行不同操作			| value= {e.detail.dataset.exec}