Vue弹出菜单功能的实现代码

言归正传

我们老样子直接先上效果图再开始今天的分享

组件分析

界面组成
逻辑分析
最终实现

界面组成

从上图中，我们可以看出界面主要分为menu和item2块，其中menu的动画是自传，item的动画是位移，然后这里我们通过绝对布局的方式将整个控件定位在四个角落

rush:js;"> .menu_container { position: absolute; z-index: 100; border-radius: 50%; transition-duration: 400ms; text-align: center; border: #efefef 3px solid; Box-shadow: aliceblue 1px 1px 1px; }

.menu_item {
position: absolute;
border-radius: 50%;
z-index: 99;
border: #efefef 3px solid;
text-align: center;
Box-shadow: aliceblue 1px 1px 1px;
}

逻辑分析

这里我将这个控件几个属性独立出来，方便下次开发，其中包含，menu的背景，整个控件在屏幕的哪个角落，menu的宽高，item距离menu位移的距离，menu的背景色，及item的背景色，item的相关内容则由数据来控制，具体的我们直接在下方的实现里来讲解。

最终实现

这里我用代码加注释的方式，帮助大家理解，template我简单的带过一下

rush:js;">

核心实现通过分析可以得出，每个item的偏移量应该为横向x:基础值 * sin(角度值）纵向y:基础值 * cos(角度值）角度值：（数组的长度-1-当前的下标）* 每一块所占的角度 * 弧度表示弧度表示：2 * Math.PI / 360

{ let el = document.getElementById(item.name); el.style.width = `${this.width * 0.8}px`; el.style.height = `${this.width * 0.8}px`; el.style.lineHeight = `${this.width * 0.8}px`; el.style.background = this.itemBg; }); //根据position，选择不同的定位 switch (this.position) { case 'LT': this.$refs.menuHome.style.left = '20px'; this.$refs.menuHome.style.top = '20px'; this.menuItems.forEach((item) => { let el = document.getElementById(item.name); el.style.left = '26px'; el.style.top = '26px';

 });
 this.operators = ['+','+'];
 break;
...

}
},methods: {
toggleMenu() {
if (!this.openFlag) {//合并时，点击展开操作
this.menuItems.forEach((item,index) => {
this.toggleMenuTransition(item.name,index,false)
});
//menu本身转一周
this.$refs.menuHome.style.transform = 'rotate(360deg)';
} else {
this.menuItems.forEach((item,true)
});
//menu恢复
this.$refs.menuHome.style.transform = 'rotate(0)';
}
this.openFlag = !this.openFlag;
},toggleMenuTransition(name,revert) {
let oneArea = 90 / (this.menuItems.length - 1);//每一块所占的角度
let axisX = Math.sin((this.menuItems.length - 1 - index) oneArea 2 Math.PI / 360);//横坐标所偏移的比例
let axisY = Math.cos((this.menuItems.length - 1 - index) oneArea 2 Math.PI / 360);//纵坐标所便宜的比例
let el = document.getElementById(name);//若所传的name一直，会报错。
let that = this;
if (!revert) {
setTimeout(function () {
el.style.transitionDuration = '200ms';
el.style.transform = translate(${that.operators[0]}${that.base<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>tance * axisX}px,${that.operators[1]}${that.base<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>tance * axisY }px);//进行动画
},index * 100)//通过定时器的方式，达到一个一个弹出来的效果
} else {
//item恢复
el.style.transitionDuration = '200ms';
el.style.transform = translate(0,0);
}
},clickMenu(item,index) {
//暴露方法给父组件，进行点击事件的操作
this.$emit('clickMenu',item,index)
}
}
}

再父组件中引入就可以大功告成啦，先跳一会儿吧,燃烧你的卡路里

父组件调用

引入组件

import toggleMenu from './toggleMenu'

在 components声明

rush:js;"> components: { toggleMenu },

template中使用

rush:js;"> menuItems: [//name和src必填，且name唯一否则会报错 {name: 'menu1',src: require('../assets/emoji.png')},{name: 'menu2',src: require('../assets/cart.png')},{name: 'menu3',src: require('../assets/folder.png')},{name: 'menu4',src: require('../assets/home.png')},{name: 'menu5',src: require('../assets/my.png')},]

属性及方法一栏

属性名用处默认值是否必须菜单背景菜单图片一个菜单图片按钮宽度distance菜单数组方法名用处参数

总结

以上所述是小编给大家介绍的Vue左侧底部弹出菜单功能的实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

vue vue vue 弹出菜单菜单菜单