47 lines
1.2 KiB
Markdown
47 lines
1.2 KiB
Markdown
|
第一步：引入组件
|
|||
|
|
|
|||
|
|
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
|
|||
|
|
itemTop：item的顶部距离，默认30rpx
|
|||
|
|
|
|||
|
|
方法使用
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
methods:{
|
|||
|
|
chooseGe(obj) {
|
|||
|
|
console.log(obj);
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|