更新记录

1.0.3（2021-08-07） 下载此版本

重新上传说明

1.0.2（2021-08-07） 下载此版本

完善宫格的说明，添加全部/折叠方法

1.0.1（2021-08-05） 下载此版本

简单说明，并上传示例项目。

平台兼容性

uni-app

其他

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 内对象的参数说明

iconsList 内对象的参数说明

事件说明