前端Vue组件技术实践:构建自定义动态宫格菜单按钮组件

news2024/12/24 6:59:05

随着前端技术的不断发展,复杂度和开发难度也随之增加。传统的整体式开发方式已经难以满足现代前端应用的需求,特别是在业务场景复杂、产品迭代频繁的情况下。组件化开发作为一种有效的解决方案,通过拆分和组合独立的组件,实现了单独开发、单独维护,并允许组件间的灵活组合,从而大大提高了开发效率和降低了维护成本。

在本文中,我们将介绍一个基于Vue的自定义精美宫格菜单按钮组件的实践。该组件具有动态设置一行展示个数的能力,可以方便地实现九宫格、十二宫格、十五宫格等不同布局。

一、组件设计

宫格菜单按钮组件的设计需要考虑到多个方面,包括布局、样式、交互等。首先,我们需要确定组件的输入和输出。对于本组件而言,输入主要包括一行展示的个数(rowNum)和菜单数组(categoryList),输出则是菜单点击事件(menuClick)。

在布局方面,我们采用了Flexbox布局,通过动态计算每个宫格的宽度和高度,实现了不同行数的宫格布局。同时,我们还为组件添加了精美的样式,使其在不同场景下都能呈现出良好的视觉效果。

在交互方面,我们为组件添加了点击事件监听器,当用户点击某个宫格时,会触发menuClick事件,并传递相应的菜单项数据。

效果图如下:

图片

图片

图片

在Vue中,我们可以通过单文件组件的方式来组织和管理组件的代码。对于本组件而言,我们定义了一个名为cc-categoryMenu的组件,并在其中编写了模板、脚本和样式。

在模板中,我们使用了v-for指令来遍历categoryList数组,并为每个菜单项创建了一个宫格。通过绑定class和style属性,我们实现了宫格的动态布局和样式。同时,我们还为每个宫格添加了一个点击事件监听器,用于触发menuClick事件。

在脚本中,我们定义了组件的props和events。props用于接收外部传入的rowNum和categoryList数据,而events则用于触发menuClick事件。我们还编写了一些计算属性和方法,用于处理宫格的布局和点击事件。

在样式中,我们定义了组件的基本样式和一些响应式样式,以确保组件在不同设备和屏幕尺寸下都能良好地显示和工作。

使用方法
<view class="header">十五宫格菜单</view>
<!-- 推荐宫格菜单 rowNum:一行展示多少个 categoryList:菜单数组 menuClick:菜单点击 -->
<cc-categoryMenu :rowNum="5" :categoryList="categoryList" @click="menuClick"></cc-categoryMenu>

<view class="header">十二宫格菜单</view>
<!-- 推荐宫格菜单 rowNum:一行展示多少个 categoryList:菜单数组 menuClick:菜单点击 -->
<cc-categoryMenu :rowNum="4" :categoryList="categoryList" @click="menuClick"></cc-categoryMenu>

<view class="header">九宫格菜单</view>
<!-- 推荐宫格菜单 rowNum:一行展示多少个 categoryList:菜单数组 menuClick:菜单点击 -->
<cc-categoryMenu :rowNum="3" :categoryList="categoryList" @click="menuClick"></cc-categoryMenu>
HTML代码实现部分
<template>
    <view class="content">

        <view class="header">十五宫格菜单</view>
        <!-- 推荐宫格菜单 rowNum:一行展示多少个 categoryList:菜单数组 menuClick:菜单点击 -->
        <cc-categoryMenu :rowNum="5" :categoryList="categoryList" @click="menuClick"></cc-categoryMenu>

        <view class="header">十二宫格菜单</view>
        <!-- 推荐宫格菜单 rowNum:一行展示多少个 categoryList:菜单数组 menuClick:菜单点击 -->
        <cc-categoryMenu :rowNum="4" :categoryList="categoryList" @click="menuClick"></cc-categoryMenu>

        <view class="header">九宫格菜单</view>
        <!-- 推荐宫格菜单 rowNum:一行展示多少个 categoryList:菜单数组 menuClick:菜单点击 -->
        <cc-categoryMenu :rowNum="3" :categoryList="categoryList" @click="menuClick"></cc-categoryMenu>

    </view>
</template>

<script>
    export default {
        data() {
            return {

                categoryList: [{
                        id: 1,
                        name: '红萝卜',
                        img: "https://cdn.pixabay.com/photo/2014/12/21/23/34/carrot-575529_1280.png"
                    }, {
                        id: 2,
                        name: '蔬菜',
                        img: "https://cdn.pixabay.com/photo/2012/04/24/16/15/broccoli-40295_1280.png"
                    }, { //分类列表
                        id: 3,
                        name: '汉堡',
                        img: "https://cdn.pixabay.com/photo/2012/04/13/01/51/hamburger-31775_1280.png"
                    }, {
                        id: 4,
                        name: '羊皮纸',
                        img: "https://cdn.pixabay.com/photo/2013/07/12/17/19/diploma-152024_1280.png"
                    },
                    {
                        id: 5,
                        name: '香蕉',
                        img: "https://cdn.pixabay.com/photo/2014/04/03/11/07/bananas-311788_1280.png"
                    }, {
                        id: 6,
                        name: '奶油草莓',
                        img: "/static/images/class/food-strawberry.png"
                    }, {
                        id: 7,
                        name: '柠檬',
                        img: "https://cdn.pixabay.com/photo/2013/07/12/17/41/lemon-152227_1280.png"
                    }, {
                        id: 8,
                        name: '热狗',
                        img: "/static/images/class/food-hotdog.png"
                    }, {
                        id: 9,
                        name: '披萨',
                        img: "/static/images/class/food-pizza.png"
                    }, {
                        id: 10,
                        name: '蛋黄酥',
                        img: "/static/images/class/food-eggyolkcake.png"
                    }
                ],

            }
        },
        onLoad() {

        },
        methods: {

            menuClick: function(item) {

                console.log("点击菜单条目item = " + JSON.stringify(item));
                uni.showModal({
                    title: '点击菜单条目',
                    content: "点击菜单条目item = " + JSON.stringify(item)
                })
            },

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;

    }

    .header {

        margin-left: 3%;
        width: 94%;
        line-height: 30px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-weight: 550;
        height: 30px;
        margin-top: 10px;

    }
</style>

三、组件应用

在实际开发中,我们可以很方便地将cc-categoryMenu组件应用到不同的场景中。只需要传入相应的rowNum和categoryList数据,并监听menuClick事件即可。通过动态设置rowNum的值,我们可以轻松地实现九宫格、十二宫格、十五宫格等不同布局的宫格菜单。

该组件的应用不仅提高了开发效率,还降低了维护成本。由于组件是独立的,我们可以单独对其进行测试和调试,确保其在不同场景下都能正常工作。同时,由于组件是可复用的,我们可以在不同的项目中重复使用它,减少了重复劳动和代码冗余。

四、总结与展望

本文介绍了一个基于Vue的自定义精美宫格菜单按钮组件的实践。通过组件化开发的方式,我们实现了宫格菜单的动态布局和交互功能,提高了开发效率和代码质量。未来,我们将继续探索更多的组件化开发策略和技术,为前端开发带来更多的便利和可能性。

同时,我们也意识到组件化开发并非一蹴而就的过程,还需要在实践中不断总结和优化。例如,我们可以进一步优化组件的性能和可维护性,提高组件的复用性和扩展性。此外,随着前端技术的不断发展,我们还可以探索更多的交互方式和视觉效果,为用户带来更好的体验。

总之,组件化开发是前端开发中一种非常重要的思想和方法。通过合理地拆分和组合组件,我们可以构建出更加高效、灵活和可维护的前端应用。

组件下载地址:

https://ext.dcloud.net.cn/plugin?id=13315

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1937643.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言 | Leetcode C语言题解之第240题搜索二维矩阵II

题目&#xff1a; 题解&#xff1a; bool searchMatrix(int** matrix, int matrixSize, int* matrixColSize, int target){int i 0;int j matrixColSize[0] - 1;while(j > 0 && i < matrixSize){if(target < matrix[i][j])j--;else if(target > matrix[…

监测电商热品推荐的技术心得

在当今数字化时代&#xff0c;电商行业竞争激烈&#xff0c;准确监测热门商品推荐对于电商企业的运营和决策至关重要。通过不断的实践和探索&#xff0c;我积累了以下一些关于监测电商热品推荐的技术心得。 一、数据采集与整合 多平台数据抓取 要全面了解电商市场的热门商品&am…

ORBSLAM3 ORB_SLAM3 Ubuntu18.04 ROS Melodic 虚拟镜像 下载

build.sh 和 build_ros.sh编译结果截图&#xff1a; slam测试视频&#xff1a; orbslam3 ubuntu18.04 test 下载地址&#xff08;付费使用&#xff0c;不能接受请勿下载&#xff09;&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/13YeJS4RGa3fBrG8BKfPbBw?pwds6vg 提…

使用phpMyAdmin操作MYSQL(四)

一. 学会phpMyAdmin&#xff1f; phpMyAdminhttp://water.ve-techsz.cn/phpmyadmin/ 虽然我我们可以用命令行操作数据库&#xff0c;但这样难免没有那么直观&#xff0c;方便。所以接下来我们使用phpMyAdmin来操作MySQL&#xff0c;phpMyAdmin是众多MySQL图形化管理工具中使用…

​人人开源renren-security:基于SpringBoot、Vue3、ElementPlus等框架开发的权限管理系统

摘要&#xff1a; 随着信息技术的快速发展&#xff0c;企业的信息系统安全需求日益凸显。renren-security是一套基于SpringBoot、MyBatis-Plus、Shiro、Vue3、ElementPlus等框架开发的权限管理系统&#xff0c;它旨在为企业提供高效、安全、易用的权限管理解决方案。本文详细阐…

用Wireshark观察IPsec协议的通信过程

目录 一、配置本地安全策略 二、启动Wireshark&#xff0c;设置过滤器&#xff0c;开始捕获 1. 主模式 2. Quick mode 三、心得体会 1. 碰到的问题和解决办法 2. 心得 一、配置本地安全策略 配置好IPsec如下&#xff1a; 由于在windows server2008安装wireshark失败&…

Qt实现一个简单的视频播放器

目录 1 工程配置 1.1 创建新工程 1.2 ui界面配置 1.3 .pro配置 2 代码 2.1 main.c代码 2.2 widget.c 2.3 widget.h 本文主要记述了如何使用Qt编写一个简单的视频播放器&#xff0c;整个示例采用Qt自带组件就可以完成。可以实现视频的播放和暂停等功能。 1 工程配置 1.…

2024.7.19最新详细的VMware17.0.0安装

VM官网VMware - Delivering a Digital Foundation For Businesses。现在官网无法下载&#xff0c;点击会跳转到https://access.broadcom.com/default/ui/v1/signin/ 要注册一个账号&#xff1a; 注册登录以后&#xff0c;点击Please select your identity provider. - Support …

深度学习落地实战:大模型生成图片

前言 大家好&#xff0c;我是机长 本专栏将持续收集整理市场上深度学习的相关项目&#xff0c;旨在为准备从事深度学习工作或相关科研活动的伙伴&#xff0c;储备、提升更多的实际开发经验&#xff0c;每个项目实例都可作为实际开发项目写入简历&#xff0c;且都附带完整的代…

基于RFID的课堂签到系统设计

1.简介 基于RFID的课堂签到系统设计是一种利用无线射频识别&#xff08;RFID&#xff09;技术实现课堂自动签到的系统。这种系统通过RFID标签&#xff08;通常是学生携带的卡片或手环等&#xff09;与安装在教室内的RFID读写器之间的无线电信号进行数据交换&#xff0c;从而实现…

深度学习入门——与学习相关的技巧

前言 本章将介绍神经网络的学习中的一些重要观点&#xff0c;主题涉及寻找最优权重参数的最优化方法、权重参数的初始值、超参数的设定方法等 此外&#xff0c;为了应对过拟合&#xff0c;本章还将介绍权值衰减、Dropout等正则化方法&#xff0c;并进行实现。 最后将对近年来…

【深度学习】PyTorch框架(2):激活函数

1.引言 在文中&#xff0c;我们将深入探讨流行的激活函数&#xff0c;并分析它们在神经网络优化特性中的作用。激活函数在深度学习模型中扮演着至关重要的角色&#xff0c;因为它们为网络引入了非线性特性。尽管文献中描述了众多的激活函数&#xff0c;但它们并非一视同仁&…

如何优化 PostgreSQL 中的连接查询性能?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 如何优化 PostgreSQL 中的连接查询性能&#xff1f;一、理解连接查询的基本原理二、优化连接查询的关键…

JavaScript 模板字符串:让字符串拼接变得更优雅

在 JavaScript 开发中&#xff0c;字符串拼接是一个常见的需求。从简单的用户界面文本生成到复杂的动态数据格式化&#xff0c;字符串操作无处不在。传统的字符串拼接方法虽然功能强大&#xff0c;但往往显得冗长且难以阅读。为了解决这一问题&#xff0c;ES6&#xff08;ECMAS…

职升网:监理工程师题型都是选择题吗?

监理工程师考试科目包含的题型主要有单项选择题、多项选择题以及案例分析题三种。其中《建设工程监理基本理论和相关法规》、《建设工程合同管理》、《建设工程目标控制》三科只有选择题题型&#xff0c;而《建设工程监理案例分析》只有案例分析题。 监理工程师各科目考试题型 …

系统架构设计师教程(清华第二版) 第3章 信息系统基础知识-3.2 业务处理系统-解读

教材中,一会儿“业务处理系统”,一会儿“事务处理系统”,语法毛病一堆。真是清华的水平!!! 系统架构设计师教程 第3章 信息系统基础知识-3.2 业务处理系统 3.2.1 业务处理系统的概念3.2.2 业务处理系统的功能3.2.2.1 数据输入3.2.2.2 数据处理3.2.2.2.1 批处理 (Batch …

C++——继承和多态

1.继承 1.1 继承的概念 在过往的文章中介绍过Java的继承&#xff0c;我们这里比较学习C的继承。 继承是出现是基于对代码复用的需求&#xff0c;在我们写代码时&#xff0c;会发现两个类之间存在大量的代码重复的情况&#xff0c;这个时候继承就排上了用场。继承可以在保持原有…

在 PostgreSQL 中如何实现数据的加密存储?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 在 PostgreSQL 中如何实现数据的加密存储&#xff1f;一、为什么要进行数据加密存储&#xff1f;二、P…

【Django】网上蛋糕商城后台-订单管理

概念 前面通过多篇文章以完全实现了用户在网上蛋糕商城平台上的所有功能和操作&#xff0c;从本文开始&#xff0c;实现网站的后台管理功能的介绍和操作。 导入静态资源 在static文件夹下&#xff0c;创建admin文件夹&#xff0c;在该文件夹下导入静态资源 在templates文件夹…

Nginx(详解以及如何使用)

目录 1. 什么是Nginx&#xff1f; 2. 为什么使用nginx? 3. 安装nginx 3.1 安装nginx的依赖插件 3.2 下载nginx 3.3 创建一个目录作为nginx的安装路径 3.4 解压 3.5 进入解压后的目录 3.6 指定nginx的安装路径 3.7 编译和安装nginx 3.8 启动nginx 3.9 访问nginx 4. ngin…