Popover组件,ios上点击遮罩层不能关闭气泡,安卓上测可以

发布于 2022-09-06 20:34:06 字数 2174 浏览 15 评论 0

antd里的Popover组件,ios上点击遮罩层不能关闭气泡,目前安卓上测试可以,为了兼容ios难道只有手写气泡组件吗...多麻烦啊



const Item = Popover.Item;

class More extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            selected: '',
        };
    };

    onSelect = (opt) => {
        this.setState({
            visible: false,
            selected: opt.props.value,
        });
        if (opt.props.value == '') {
            ///
        } else if (opt.props.value == '') {
            ///
        }
    };

    handleVisibleChange = (visible) => {
        this.setState({
            visible,
        });
    };

    render() {
        let offsetX = -((document.querySelector('body').offsetWidth) * 0.125) + 9;
        return (
            <div>
                <Popover 
                    mask
                    overlayClassName="fortest"
                    overlayStyle={{ color: 'currentColor' }}
                    visible={this.state.visible}
                    className="c-more"
                    overlay={[
                        (<Item key="4" value="code" icon={<Icon type={require('./image/QrCode1.svg')} size="xs" />} data-seed="logId">
                            二维码
                        </Item>),
                        (<Item key="6" value="quit" icon={<Icon type={require('./image/PullOut1.svg')} size="xs" />}> 
                            <span style={{ marginRight: 5 }}>退出</span>
                        </Item>),
                    ]}
                    align={{
                        overflow: { adjustY: 100, adjustX: 0 },
                        offset: [offsetX, -180],
                    }}
                    onVisibleChange={this.handleVisibleChange}
                    onSelect={this.onSelect}
                >
                    <div className="c-more-button"
                        icon={<Icon type={require('./image/more1.svg')} size="md" />}
                    >
                    </div>
                </Popover>
            </div>
        );
    }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

女中豪杰 2022-09-13 20:34:06

代码看不出什么问题。
今天官网确实打不开,需要梯子才可以。
给你一个国内镜像:
antd
antd-mobile

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文