快速实现vue uni-app宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格 十二宫格 十五宫格; 阅读全文下载完整代码请关注微信公众号： 前端组件开发
效果图如下：
文章来源：https://www.toymoban.com/news/detail-480375.html
文章来源地址https://www.toymoban.com/news/detail-480375.html
使用方法
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="九宫格" gridNum="3" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="十二宫格" gridNum="4" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="十五宫格" gridNum="5" :gridList="gridList" @click="gridClick"></ccGridButton>
HTML代码部分
<template>
<view>
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="九宫格" gridNum="3" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="十二宫格" gridNum="4" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="十五宫格" gridNum="5" :gridList="gridList" @click="gridClick"></ccGridButton>
</view>
</template>
JS代码 （引入组件 填充数据）
<script>
import ccGridButton from '../components/ccGridButton.vue';
export default {
components:{
ccGridButton
},
data() {
return {
gridList: [{
name: '功能1',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能2',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能3',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能4',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能5',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能6',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能7',
imgSrc: "../../static/appointList.svg",
},
{
name: '功能8',
imgSrc: "../../static/appointNum.svg",
},
{
name: '功能9',
imgSrc: "../../static/appointNum.svg",
},
]
}
},
methods: {
gridClick(item, index) { //格子菜单点击事件
console.log('item = ' + item.name + 'index = ' + index);
uni.showModal({
title:'温馨提示',
content:'点击的功能是: ' + item.name
})
}
}
}
</script>
CSS
<style lang="less" scoped>
</style>
到了这里，关于前端vue 宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格 十二宫格 十五宫格的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[自定义 Vue 组件] 小尾巴下拉菜单组件(2.0) TailDropDown](https://imgs.yssmx.com/Uploads/2024/02/743001-1.png)
