React实现了一个简单的 CSS 扇形菜单，其具体代码是什么？

发布时间：2023-09-05 14:21:32 所属栏目：语言来源：

导读：项目需要用到环形菜单，初略在网上找了一下，没有找到合适的，于是自己写了一个很简单的，后续再优化。

这个组件是基于react,但是原理都一样。

实现

css(less)

@centerIconSize: 30px;

.flex(@j

项目需要用到环形菜单，初略在网上找了一下，没有找到合适的，于是自己写了一个很简单的，后续再优化。

这个组件是基于react,但是原理都一样。

实现

css(less)

@centerIconSize: 30px;

.flex(@justify: flex-start, @align: center) {

    justify-content: @justify;

    align-items: @align;

    display: flex;

}

.sector-menu-wrapper {

    position: relative;

    width: @centerIconSize;

    margin: auto;

    .center-icon {

        .flex(center);

        width: @centerIconSize;

        height: @centerIconSize;

        border-radius: 50%;

        background: rgba(0, 0, 0, 0.3);

        color: white;

        cursor: pointer;

    }

    .sector-item {

        position: absolute;

        .flex(center);

        width: @centerIconSize;

        height: @centerIconSize;

        border-radius: 50%;

        background: rgba(0, 0, 0, 0.3);

        cursor: pointer;

        color: white;

        top: 0;

        left: 0;

        transition: all linear 0.5s;

        transform: translate(0, 0);

        // display: none;

        visibility: hidden;

    }

    .sector-list {

        &.sector-list-active {

            transition: all linear 0.5s;

            .sector-item {

                .flex(center);

                transition: all linear 0.5s;

                transform: translate(0, 0);

                visibility: visible;

                &: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.js

import React from 'react';

export default class SectorMenu extends React.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;

        if (!sectorMenuItemFunctions || typeof(sectorMenuItemFunctions[index]) !== 'function') {

            return;

        }

        sectorMenuItemFunctions[index]();

    }

    getSectorJsx = () => {

        const { sectorMenuItems } = this.props;

        if (!sectorMenuItems || !Array.isArray(sectorMenuItems) || sectorMenuItems.length === 0) {

            return;

        }

        const styles = {};

        const { sectorMenuVisible } = this.state;

        return sectorMenuItems.map((item, i) => {

            // const styles = {

            //     transform: translate(0, -centerIconSize * 2);

            // };

            return (<div

                className={`sector-item ${sectorMenuVisible && 'sector-item-active'}`}

                style={styles}

                onClick={() => this.onClickSectorMenuItem(i)}

                key={i}

            >

                {item}

            </div>)

        });

    }

    render() {

        const { sectorMenuVisible } = this.state;

        return (

            <div className="sector-menu-wrapper">

                <div className="center-icon" onClick={this.showSectorMenu}>

                    {

                        sectorMenuVisible ? 'x' : '···'

                    }

                </div>

                <div className={`sector-list ${sectorMenuVisible && 'sector-list-active'}`}>

                    {this.getSectorJsx()}

                </div>

            </div>

        )

    }

}

调用

<SectorMenu

    sectorMenuItems={['A1', 'A2', 'A3']}

    sectorMenuItemFunctions={[function () {console.log(0)}, function () {console.log(1)}, function () {console.log(2)}]}

/>

期望

本来是想写成灵活分布，在怎么计算位置这里稍稍卡了一下，项目时间紧，改天抽空优化一下

灵活布局sectorMenuItem

灵活展示SectorMenu的位置（left,right, top, bottom...）

踩坑

过渡动画一直没有用，后来才知道是我在sector-item这个类里使用了display:none导致的，改用visibility属性就可以了。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!