Vue弹出菜单功能实现代码

进入正题

我们直接去效果图开始今天的github分享这个项目可以看一下

分量分析

界面组合的逻辑分析最终实现界面组合

从上图可以看出，界面主要分为菜单和item2，其中菜单的动画为自传，item的动画为位移，然后我们通过绝对布局将整个控件定位在四个角落。menu _ container { position : absolute；z-index : 100；边界半径：50%；过渡-持续时间： 400毫秒；文本对齐：中心；border: #efefef 3px固体；box-shadow : aliceblue 1px 1px 1px；} .menu_item { position:绝对值；边界半径：50%；z-index : 99；border: #efefef 3px固体；文本对齐：中心；box-shadow : aliceblue 1px 1px 1px；}逻辑分析

这里我把这个控件的几个属性分开来进行下一步的开发，包括菜单的背景，整个控件的哪个角在屏幕上，菜单的宽度和高度，菜单项和菜单之间的位移距离，菜单的背景色，菜单项的背景色。项目的相关内容由数据控制。具体来说，我们将在下面的实现中直接解释。

最终实现

在这里，我用代码添加注释来帮助大家理解，模板我简单拿了一下

div class=' menu _ container ' ref=' menu home ' @ click=' toggleMenu ' img : src=' http : menusrc '！-菜单图-/div div class=' menu _ item ' v-for='菜单项' : id=' item . name ' @ click=' click menu(item，index)' img 3360 src=' http 3360 item . src '！-项图- /div /div核心实现通过分析，每个项的偏移量应为水平x:基本值* sin(角度值)垂直y:基本值* cos(角度值)角度值：(数组长度-1-当前下标)*每个块占用的角度*弧度代表弧度：2 * math.pi。

导出默认值{.道具： {//开放的属性，方便自定义menusrc : {默认值： require('./assets/menu.png') }，位置： {默认值： ' LT '//可选择LT、LB、RT、RB4个角落}，width: { default:50 }，baseDistance: { default:150 }，menubg : { default : ' white ' }，item BG : { default : ' white ' }，menuItems: { type: Array，}，data(){ return { open flag 3360 false，//展开合并标志operators: [' '，' ']，//用于记录展开时动画正常男性染色体组型方向} },挂载(){ //根据小道具初始化各内容的各种设计这个参考文献。回家吧。风格。宽度=这个。宽度' px '；这个参考文献。回家吧。风格。高度=这个。宽度' px '；这个参考文献。回家吧。风格。行高=这个。宽度' px '；这个参考文献。回家吧。风格。背景=这个。MenuBg这个。菜单。foreach((item)={ let El=document。getelementbyid(项。姓名)；埃尔。风格。width=`$ { this。宽度* 0.8 } px `；埃尔。风格。高度=`$ { this。宽度* 0.8 } px `；埃尔。风格。行高=`$ { this。宽度* 0.8 } px `；埃尔。风格。背景=这个。项目BG；});//根据位置，选择不同的定位开关(这个。位置){案例' LT ' :这.参考文献。回家吧。风格。left=' 20px这个参考文献。回家吧。风格。top=' 20px这个。菜单。foreach((item)={ let El=document。getelementbyid(项。姓名)；埃尔。风格。左=' 26px埃尔。风格。top=' 26px});this.operators=[' '，' ']；打破；} }，methods: { toggleMenu() { if(！this.openFlag) {//合并时，点击展开操作this.menuItems.forEach((项，索引)={ this。toggleMenutransition(项目。名称、索引、false)})；//菜单本身转一周这个参考文献。回家吧。风格。变换='旋转(360)'；} else { this。菜单。foreach((项，索引)={ this。togglemenutransition(项目。名称、索引、true)})；//菜单恢复这个参考文献。回家吧。风格。transform=' rotate(0 '；} this.openFlag=！this.openFlag}、toggleMenuTransition(名称、索引、还原){让一个区域=90/(this。菜单。长度-1)；//每一块所占的角度让x轴=数学。(这。菜单。长度-1-索引)*一个区域* 2 *数学.PI/360)；//横坐标所偏移的比例让axisY=数学。cos((这个。菜单。长度-1-索引)*一个区域* 2 *数学.PI/360)；//纵坐标所便宜的比例让El=文档。getelementbyid(名称)；//若所传的名字一直，会报错让那个=这个；if(！revert){ setTimeout(function(){ El。风格。transitionduration=' 200 ms埃尔。风格。transform=` translate($ { that。运算符[0]} $ {即。基本距离* x轴} px，$ {即。运算符[1]} $ {即。基本距离*轴} px)`；//进行动画},索引* 100)//通过定时器的方式，达到一个一个弹出来的效果} else { //item恢复埃尔。风格。transitionduration=' 200毫秒；埃尔。风格。transform=` translate(0，0)`；} },单击菜单（项目，索引){ //暴露方法给父组件，进行点击事件的操作这个$emit('点击菜单'，项目，索引)} } }再父组件中引入就可以大功告成啦，先跳一会儿吧，燃烧你的卡路里

父组件调用

引入组件

从""导入toggleMenu ./toggleMenu '

在成分声明

组件： { toggleMenu}，模板中使用

menuitems 3360[//名称和科学研究委员会必填，且名字唯一否则会报错{name: 'menu1 '，src: require('./assets/emoji.png')}，{name: 'menu2 '，src: require('./assets/cart.png')}，{name: 'menu3 '，src:要求('./assets/folder.png')}，{name: 'menu4 '，src: require('./assets/home.png')}，{name: 'menu5 '，src:要求('./assets/my.png')}，]切换菜单：菜单项=' menuItems ' @单击菜单='单击菜单'/切换菜单属性及方法一栏

属性名使用defauLT值：必须定位四个方向(LT，LB，RT，RB) LT无menuBg菜单背景白色无menuSrc菜单图片一个菜单图片无itemBg按钮背景白色无宽度按钮宽度50px无baseDistance位移距离，如果项目多，可以适当增加150px。没有菜单项菜单数组就是没有方法名。使用参数点击菜单。单击项目以触发事件项目，索引摘要

以上是边肖介绍的Vue左下方弹出菜单功能的实现代码，对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！