通过分析核心实现可以得出每个item的偏移量应该是水平x：基本值*sin（角度值）垂直y：基本值*cos（角度值)角度值：（数组长度-1-当前下标）每块占的角度用弧度表示：2*Math.PI/exportdefault{...props:{//开启属性，方便自定义menuSrc:{default:require('../assets/menu.png')},position:{default:'LT'//可选LT,LB，RT，RB4角}，宽度：{默认值：50，}，baseDistance：{默认值：150，}，menuBg：{默认值：'white'}，itemBg：{默认值：'white'}，menuItems：{类型:Array,}},data(){return{openFlag:false,//展开合并标志运算符：['+','+'],//展开时用于记录动画XY方向}},mounted(){//根据props初始化每个内容的各种样式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)=>{letel=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;});//根据位置，选择不同的位置开关(this.position){case'LT':this.$refs.menuHome.style.left='20px';this.$refs.menuHome.style.top='20px';this.menuItems.forEach((item)=>{letel=document.getElementById(item.name);el.style.left='26px';el.style.top='26px';});这个.operators=['+','+'];休息;...}},methods:{toggleMenu(){if(!this.openFlag){//合并时，点击展开操作this.menuItems.forEach((item,index)=>{this.toggleMenuTransition(item.name,index,false)});//菜单本身围绕this.$refs.menuHome.style.transform='rotate(度）';}else{this.menuItems.forEach((item,index)=>{this.toggleMenuTransition(item.name,index,true)});//菜单恢复this.$refs.menuHome.style.transform='rotate(0)';}this.openFlag=!this.openFlag;},toggleMenuTransition(name,index,revert){letoneArea=90/(this.menuItems.length-1);//每个块占用的角度letaxisX=Math.sin((this.menuItems.length-1-index)*oneArea*2*Math.PI/360);//横坐标偏移的比例letaxisY=Math.cos((this.menuItems.length-1-index)*oneArea*2*Math.PI/360);//纵坐标比较便宜的比例letel=document.getElementById(name);//如果传入的名字相同，会报错。让那个=这个；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)`;//Animate},index*100)//通过定时器的方式，实现一一弹出的效果}else{//项目恢复el.style.transitionDuration='200ms';el.style.transform=`translate(0,0)`;}},clickMenu(item,index){//暴露方法给父组件，执行点击事件操作this.$emit('clickMenu',item,index)}}}并导入到父组件中，重做。让我们跳一会儿，燃烧你的卡路里。父组件调用引入的组件importtoggleMenufrom'./toggleMenu'在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')},]属性和方法一列属性名使用默认值必须定位四个位置（LT，LB，RT，RB）LTnomenuBg菜单背景白色nomenuSrc菜单图片a菜单图片noitemBg按钮背景白色nowidth按钮宽度50pxnobaseDistance位移距离，如果项目较多，可适当增加150px。没有menuItems菜单数组是没有用的。参数clickMenu点击item触发事件item和index。几乎是共享的。