前端vue 宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格十二宫格十五宫格-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端vue 宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格十二宫格十五宫格。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

快速实现vue uni-app宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格十二宫格十五宫格; 阅读全文下载完整代码请关注微信公众号：前端组件开发

效果图如下：

前端vue 宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格十二宫格十五宫格

前端vue 宫格组件提供常见九宫格菜单组件，扩充性好，可切换九宫格十二宫格十五宫格文章来源地址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>