# Grid 宫格

# 基本使用

unify-data数据格式:

[{
	image: "https://unify.dengqichang.cn/file/picture/sys/default1.png",//图片地址
	name: "宫格",//模块名称
	badge: 1 //数字角标(有则显示角标,没有也行)
},{
	image: "https://unify.dengqichang.cn/file/picture/sys/default1.png",
	name: "宫格"
}]
<template>
	<view>
		<unify-grid :unify-data="data" @click="selected"></unify-grid>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [{
					image: "https://unify.dengqichang.cn/file/picture/sys/default1.png",//图片地址
					name: "宫格",//模块名称
					badge: 1 //数字角标
				},{
					image: "https://unify.dengqichang.cn/file/picture/sys/default1.png",
					name: "宫格",
					badge: 2
				},{
					image: "https://unify.dengqichang.cn/file/picture/sys/default1.png",
					name: "宫格",
					badge: 3
				},{
					image: "https://unify.dengqichang.cn/file/picture/sys/default1.png",
					name: "宫格"
				},{
					image: "https://unify.dengqichang.cn/file/picture/sys/default1.png",
					name: "宫格"
				}]
			};
		},
		methods: {
			selected:function(e){
				//返回当前点击下标的json数据
				console.log(e);
			}
		}
	}
</script>
<style lang="scss">

</style>

# Attributes

参数 说明 类型 可选值 默认值
unify-data 数据 Array - -
width grid总宽度 String/Number - 750
number 每行数量 String/Number - 5
imageSize 图片尺寸 String/Number - 100
imageRadius 图片圆角尺寸 String/Number - 0
textSize 文本尺寸 String/Number - 28
textColor 文本颜色 String - color-main

# Event

事件名 说明 回调参数
@click 点击事件 返回当前下标的json数据