高敬炎 f1d70420be 前端 1 rok temu
..
pages f1d70420be 前端 1 rok temu
changelog.md f1d70420be 前端 1 rok temu
readme.md f1d70420be 前端 1 rok temu

readme.md

lxm-fold-grid是一个全平台前端页面模板,一般用来做个人中心页面模板,也可以做其他页面模板。宫格折叠收起展开+堆叠图片轮播+操作条+头像+胶囊按钮+图标带文字选项卡

组件名:lxm-fold-grid 代码块: lxm-fold-grid

说明

基于Color UI 的宫格,本模板引用插件luyj-grid-link的主要功能包括:

  • 按组显示宫格信息。
  • 每组可以选择标题是否展示、可以选择背景色。
  • 超过一行,自动设置折叠/展开的形式。点击:展开折叠按钮显示宫格内容。
  • 也可以修改为超过两行自动设置折叠/展开的形式。这个可以修改“luyj-grid-link.vue”文件里的参数。item.colNumber*1改为:item.colNumber*2。@/common/data/data.js,列表iconsList里图标超过9个,比如12个左右。

安装方式

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

本模板引用插件luyj-grid-link的基本用法

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}

传奇开心果模板,名称:lxm-fold-gridV1.0.0,传奇开心果出品,2022.1.6