高敬炎 f1d70420be 前端 1 năm trước cách đây
..
components f1d70420be 前端 1 năm trước cách đây
changelog.md f1d70420be 前端 1 năm trước cách đây
readme.md f1d70420be 前端 1 năm trước cách đây

readme.md

luyj-grid-link

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

说明

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

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

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

alt 宫格展开

安装方式

  • 本组件符合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}