前言项目需要用到环形菜单。一开始在网上搜了一下，没找到合适的，自己写了一个很简单的，后面再优化。这个组件是基于react的，但是原理是一样的。展开效果如下：实际css(less)@centerIconSize:30px;.flex(@justify:flex-start,@align:center){justify-content:@justify;对齐项目：@align；显示：flex；}.sector-menu-wrapper{位置：相对；宽度：@centerIconSize；保证金：自动；.center-icon{.flex(center);宽度：@centerIconSize；高度：@centerIconSize；边界半径：50%；背景：rgba(0,0,0,0.3);白颜色;游标：指针；}.sector-item{位置：绝对；.flex(中心);宽度：@centerIconSize；高度：@centerIconSize；边界半径：50%；背景：rgba(0,0,0,0.3);游标：指针；白颜色;顶部：0；左：0；过渡：全部线性0.5s；转换：翻译（0，0）；//显示：无；可见性：隐藏；}.sector-list{&.sector-list-active{transition:alllinear0.5s;.sector-item{.flex(center);过渡：全部线性0.5s；转换：翻译（0，0）；能见度：可见；&:first-child{transform:translate(0,-@centerIconSize*1.5);}&:nth-child(2){transform:translate(-@centerIconSize*1.5,0);}&:nth-child(3){transform:translate(0,@centerIconSize*1.5);}}}}}SectorMenu.jsimportReactfrom'react';exportdefaultclassSectorMenuextendsReact.Component{state={direction:'left',sectorMenuVisible:false,centerIconSize:30,sectorItemSize:30,}/***显示环形菜单*/showSectorMenu=()=>{const{sectorMenuVisible}=this.state;this.setState({sectorMenuVisible:!sectorMenuVisible,})}onClickSectorMenuItem=(index)=>{const{sectorMenuItemFunctions}=this.props;如果（！sectorMenuItemFunctions||typeof（sectorMenuItemFunctions[索引]）！=='函数'）{返回;}sectorMenuItemFunctions[索引]();}getSectorJsx=()=>{const{sectorMenuItems}=this.props;如果(!sectorMenuItems||!Array.isArray(sectorMenuItems)||sectorMenuItems.length===0){return;}常量样式={};const{sectorMenuVisible}=this.state;returnsectorMenuItems.map((item,i)=>{//conststyles={//transform:translate(0,-centerIconSize*2);//};return(
