Vue弹出菜单功能的实现代码
程序员文章站
2022-07-04 22:14:16
言归正传
我们老样子直接先上效果图再开始今天的分享
组件分析
界面组成
逻辑分析
最终实现
界面组成
从上图中,我们可以看出...
言归正传
我们老样子直接先上效果图再开始今天的分享
组件分析
- 界面组成
- 逻辑分析
- 最终实现
界面组成
从上图中,我们可以看出界面主要分为menu和item2块,其中menu的动画是自传,item的动画是位移,然后这里我们通过绝对布局的方式将整个控件定位在四个角落
.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我简单的带过一下
<div> <div class="menu_container" ref="menuhome" @click="togglemenu"> <img :src="menusrc"><!--menu图--> </div> <div class="menu_item" v-for="(item,index) in menuitems" :id="item.name" @click="clickmenu(item,index)"> <img :src="item.src"><!--item图--> </div> </div>
核心实现 通过分析可以得出,每个item的偏移量应该为 横向x:基础值 * sin(角度值) 纵向y:基础值 * cos(角度值) 角度值:(数组的长度-1-当前的下标)* 每一块所占的角度 * 弧度表示 弧度表示:2 * math.pi / 360
export default { ... props: {//开放的属性,方便自定义 menusrc: { default: require('../assets/menu.png') }, position: { default: 'lt'//可选择lt、lb、rt、rb4个角落 }, width: { default: 50, }, basedistance: { default: 150, }, menubg: { default: 'white' }, itembg: { default: 'white' }, menuitems: { type: array, } }, data() { return { openflag: false,//展开合并标志 operators: ['+', '+'],//用于记录展开时动画xy方向 } }, mounted() { //根据props初始化各内容的各种style this.$refs.menuhome.style.width = this.width + 'px'; this.$refs.menuhome.style.height = this.width + 'px'; this.$refs.menuhome.style.lineheight = this.width + 'px'; this.$refs.menuhome.style.background = this.menubg; this.menuitems.foreach((item) => { 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, index) => { this.togglemenutransition(item.name, index, true) }); //menu恢复 this.$refs.menuhome.style.transform = 'rotate(0)'; } this.openflag = !this.openflag; }, togglemenutransition(name, index, 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.basedistance * axisx}px,${that.operators[1]}${that.basedistance * 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声明
components: { togglemenu },
template中使用
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')}, ] <toggle-menu :menuitems="menuitems" @clickmenu="clickmenu" ></toggle-menu>
属性及方法一栏
属性名 | 用处 | 默认值 | 是否必须 |
---|---|---|---|
position | 四个方位(lt、lb、rt、rb) | lt | 否 |
menubg | 菜单背景 | white | 否 |
menusrc | 菜单图片 | 一个菜单图片 | 否 |
itembg | 按钮背景 | white | 否 |
width | 按钮宽度 | 50px | 否 |
basedistance | 位移距离,若item很多,可适当提高 | 150px | 否 |
menuitems | 菜单数组 | 无 | 是 |
方法名 | 用处 | 参数 |
---|---|---|
clickmenu | 点击item触发事件 | item,index |
总结
以上所述是小编给大家介绍的vue左侧底部弹出菜单功能的实现代码,希望对大家有所帮助
上一篇: 详解react内联样式使用webpack将px转rem
下一篇: kdTree相关原理及c++实现