tourism/uni_applet/uni_modules/lxm-fold-link/luyj-grid-link

luyj-grid-link

组件名：luyj-grid-link 代码块： luyj-grid-link

说明

由于是基于ColorUI-uniAPP模板，列表下的宫格。为了更专注于页面的数据，我将宫格的代码打包成插件形式。

基于Color UI 的宫格的主要功能包括：

• 按组显示宫格信息
• 每组可以选择标题是否展示、背景色
• 超过两行，自动设置折叠/展开的形式。点击：展开 或折叠按钮显示宫格内容。

安装方式

• 本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。
• 本组件的样式基于ColorUI 。所以，若要使用先依照官网下载并下源码解压，复制根目录的 /colorui 文件夹到你的根目录。然后在App.vue 引入关键Css main.css icon.css。

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    @import "app.css"; /* 你的项目css */
    ....
</style>

基本用法

在 template 中的使用

	<luyj-grid-link :list="list" @gridExc="clickGrid"></luyj-grid-link>

这里 list对应列表数据;@gridExc,对应没有链接属性时，宫格的执行方法,其中e.detail.dataset.exec对应列表中宫格的exec属性。这里引用了数据：

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}