随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。

本文给大家介绍的一款组件是：

前端vue uni-app宫格菜单按钮组件，提供常见的宫格布局，如八宫格、九宫格的菜单组件;效果图如下:

编辑

参考代码如下:

宫格菜单按钮组件，提供常见的宫格布局，如八宫格、九宫格

HTML代码部分


> <template>
>
> <view class="content">
>
> <view class="headLine"> 八宫格 </view>
>
> <view class="upView" style="background-color: aliceblue;">
>
> <!--使用方法: click:事件 myFlag:标识  myText:文字 imgSrc:图片地址 size:图片尺寸 -->
>
> <CCMenuBtn @click="menuClick(0)" myFlag="12" myText='功能1' imgSrc='../../static/jsl_zhpj.png'></CCMenuBtn>
>
> <CCMenuBtn @click="menuClick(1)" myText='功能2' imgSrc='../../static/jsl_jsl.png'></CCMenuBtn>
>
> <CCMenuBtn @click="menuClick(2)" myText='功能3' imgSrc='../../static/jsl_zjl.png'></CCMenuBtn>
>
> <CCMenuBtn myText='功能4' imgSrc='../../static/jsl_xxl.png'></CCMenuBtn>
>
> <CCMenuBtn myText='功能5' imgSrc='../../static/jsl_wl.png'></CCMenuBtn>
>
> <CCMenuBtn myText='功能6' imgSrc='../../static/jsl_nll.png'></CCMenuBtn>
>
> <CCMenuBtn myText='功能7' imgSrc='../../static/jsl_cxjq.png'></CCMenuBtn>
>
> <CCMenuBtn myFlag="2" myText='功能8' imgSrc='../../static/jsl_jcxx.png'></CCMenuBtn>
>
> </view>
>
> <view class="headLine"> 九宫格 </view>
>
> <!-- 九宫格菜单区 -->
>
> <view class="upView" style="background-color: antiquewhite;">
>
> <CCMenuBtn class="nineV" myText='菜单1' imgSrc='../../static/jsl_zhpj.png'></CCMenuBtn>
>
> <CCMenuBtn class="nineV" myText='菜单2' imgSrc='../../static/jsl_jsl.png'></CCMenuBtn>
>
> <CCMenuBtn class="nineV" myText='菜单13' imgSrc='../../static/jsl_zjl.png'></CCMenuBtn>
>
> <CCMenuBtn class="nineV" myText='菜单14' imgSrc='../../static/jsl_xxl.png'></CCMenuBtn>
>
> <CCMenuBtn class="nineV" myText='菜单15' imgSrc='../../static/jsl_wl.png'></CCMenuBtn>
>
> <CCMenuBtn class="nineV" myText='菜单16' imgSrc='../../static/jsl_nll.png'></CCMenuBtn>
>
> <CCMenuBtn class="nineV" myText='菜单17' imgSrc='../../static/jsl_cxjq.png'></CCMenuBtn>
>
> <CCMenuBtn class="nineV" myFlag="2" myText='菜单18' imgSrc='../../static/jsl_jcxx.png'></CCMenuBtn>
>
> <CCMenuBtn class="nineV" myFlag="2" myText='菜单18' imgSrc='../../static/jsl_jcxx.png'></CCMenuBtn>
>
> </view>
>
> </view>
>
> </template>

JS代码（引入组件填充数据）


> <script>
>
> import CCMenuBtn from "../../components/CCMenuBtn.vue"
>
> export default {
>
> components: {
>
> CCMenuBtn
>
> },
>
> data() {
>
> return {
>
> title: 'Hello'
>
> }
>
> },
>
> onLoad() {
>
> },
>
> methods: {
>
> menuClick(menuName) {
>
> console.log("点击菜单 = " + menuName)
>
> }
>
> }
>
> }
>
> </script>

CSS


> <style>
>
> .content {
>
> display: flex;
>
> flex-direction: column;
>
> }
>
> .upView {
>
> display: flex;
>
> flex-direction: row;
>
> flex-wrap: wrap;
>
> margin-left: 12px;
>
> width: calc(100vw - 24px);
>
> margin-top: 10px;
>
> padding: 4px 0px;
>
> background-color: white;
>
> }
>
> .headLine {
>
> height: 30px;
>
> line-height: 30px;
>
> margin: 10px 15px;
>
> font-size: 20px;
>
> }
>
> .nineV {
>
> width: calc((100vw - 24px)/3);
>
> }
>
> </style>

阅读全文下载完整代码请关注微信公众号：前端组件开发

vue uni-app九宫格菜单按钮组件，提供常见的宫格布局，如八宫格、九宫格

宫格菜单按钮组件，提供常见的宫格布局，如八宫格、九宫格

HTML代码部分

JS代码 （引入组件 填充数据）

CSS

JS代码（引入组件填充数据）