template-project/components/function-list/gong-ge/readme.md

1.2 KiB
Raw Permalink Blame History

第一步:引入组件

import gongGeFunction from '@/components/function-list/gong-ge/gong-ge-function.vue';

第二步:注册组件

export default {
	components:{
		gongGeFunction
	}
}

第三步:使用组件

<template>
	<view>
		<gong-ge-function @chooseGe="chooseGe"></gong-ge-function>
	</view>
</template>

参数说明

list列表数据默认以下数组
[
	{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题一'},
	{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题二'},
	{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题三'},
	{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题四'},
	{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
	{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
	{url:'',iconsrc:'',iconWidth:60,iconHeight:60,title:'标题五'},
]
rowNum一排显示数量默认5
titlec标题颜色默认#000000
fonts字体大小默认28rpx
titleTop字体距离图标的距离默认20rpx
itemTopitem的顶部距离默认30rpx

方法使用

export default {
	methods:{
		chooseGe(obj) {
			console.log(obj);
		},
	}
}