首页 > 其他分享 >前端Vue仿微信我的菜单栏组件按钮组件

前端Vue仿微信我的菜单栏组件按钮组件

时间:2023-07-18 09:34:02浏览次数:42  
标签:Vue name 菜单栏 点击 菜单 按钮 组件

随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。

通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率低,降低维护成本。

今天给大家介绍的一款组件前端Vue仿微信我的菜单栏组件按钮组件;附源码下载地址 https://ext.dcloud.net.cn/plugin?id=13610

效果图如下:

实现代码如下

cc-wxBtn

使用方法


<!-- mySrc:图片地址 title:标题 @menuClick:按钮点击 -->

<cc-wxBtn mySrc="../../static/image/member-menu4.png" title="我的余额" @menuClick="menuClick" ></cc-wxBtn>

// 按钮点击事件

menuClick(name) {

  uni.showModal({

title:'点击菜单',

content:'点击菜单名称 = ' + name

})

},

HTML代码实现部分


<template>

<view class="content">

<!-- mySrc:图片地址 title:标题 @menuClick:按钮点击 -->

<cc-wxBtn mySrc="../../static/image/member-menu4.png" title="我的余额" @menuClick="menuClick" ></cc-wxBtn>

<!-- mySrc:图片地址 title:标题 @menuClick:按钮点击 -->

<cc-wxBtn mySrc="../../static/image/member-menu2.png" title="在线客服" @menuClick="menuClick" ></cc-wxBtn>

<!-- mySrc:图片地址 title:标题 @menuClick:按钮点击 -->

<cc-wxBtn mySrc="../../static/image/member-menu3.png" title="邀请有礼" @menuClick="menuClick" ></cc-wxBtn>

<!-- mySrc:图片地址 title:标题 @menuClick:按钮点击 -->

<cc-wxBtn mySrc="../../static/image/member-menu5.png" title="关于我们" @menuClick="menuClick" ></cc-wxBtn>

</view>

</template>

<script>

export default {

data() {

return {

}

},

methods: {

menuClick(name) {

uni.showModal({

title:'点击菜单',

content:'点击菜单名称 = ' + name

})

},

}

}

</script>

<style>

page {

background-color: white;

margin-bottom: 50px;

}

</style>

标签:Vue,name,菜单栏,点击,菜单,按钮,组件
From: https://www.cnblogs.com/ccVue/p/17561899.html

相关文章

  • vue--day27---vue生命周期1
              beforeCreate:数据监测、数据代理创建之前在实例初始化之后,数据监测、数据代理创建之前被调用,此时无法通过VM访问data中的数据、methods中的方法。created:数据监测、数据代理创建之后实例已经创建完成之后被调用,在这一步,实例已完成以下配......
  • 浅析vue3中如何使用动态组件、如何快速理解Vue3的 toRaw和markRaw、ref与shallowRef、
    一、Vue3中使用component:is加载动态组件1、不使用setup语法糖,这种方式和vue2差不多,is可以是个字符串2、使用setup语法糖,这时候的is如果使用字符串就会加载不出来,得使用组件实例<componentclass="task-box":is="componentObj[route.params.type]":info="taskInfo"></co......
  • 针对el-menu-item组件的警告Invalid event arguments: event validation failed for e
    现象:解决办法:加上index这个唯一标识,不然会有意想不到的问题......
  • React、Vue框架如何实现组件更新,原理是什么?
    原文合集地址如下,有需要的朋友可以关注本文地址合集地址引言React和Vue都是当今最流行的前端框架,它们都实现了组件化开发模式。为了优化性能,两者都采用了虚拟DOM技术。当组件状态发生改变时,它们会使用虚拟DOM进行局部渲染比对,只更新必要的DOM节点,从而避免重新渲染整个......
  • Vue的生命周期简介
    Vue.js是一种流行的JavaScript框架,它采用了组件化的开发模式。在Vue组件的生命周期中,有不同的阶段和钩子函数,用于在不同的时间点执行特定的逻辑操作。下面是Vue组件的生命周期简介:创建阶段:beforeCreate:在实例被创建之前,触发该钩子函数。created:在实例被创建后,触发该钩子函数......
  • Vue
    一、Vue概述1.Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。2.基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。3.官网:https://v2.cn.vuejs.org/4.框架:是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开......
  • Django+DRF+Vue 网页开发环境安装(windows/Linux)
    博客地址:https://www.cnblogs.com/zylyehuo/总览一、安装Djangopipinstalldjango==3.2二、安装MySQL驱动程序pipinstallpymysql三、安装DRFpipinstalldjangorestframework-ihttps://pypi.douban.com/simple四、安装Vue(一)脚本化引入<scriptsrc=......
  • 【12.0】Django框架之form组件
    【一】需求写一个注册功能获取用户名和密码,利用form表单提交数据在后端判断用户名和密码是否符合一定的条件用户名中不能包含啦啦啦密码不能少于三位如果符合条件需要你将提示信息展示到前端页面【二】form表单实现【1.0】点击提交按钮返回比对信息前端页面<f......
  • 保姆级教程:手把手教你搭建vue3+vite+pinia项目,直接上手开发
    虽然代码很机械的就写出来了,但是搭建项目却总是很生疏会忘记呢(毕竟一个项目做n年。。)第一步:npmcreateviteprojectName(你的项目名)第二步,:选择Vue第三步:选择想要用的语言,这里我选了javascript第四步:切换到对应项目目录,npminstall下载当前所需依赖 经过上面四步,一个最简......
  • vue实现浏览器端大文件分片上传
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传  可以带参数        [HttpPost("upload")]        publicJsonResultuploadProject(I......