ant-design / ant-design-mobile

Essential UI blocks for building mobile web apps.
https://mobile.ant.design
MIT License
11.67k stars 2.41k forks source link

Popover组件和FloatingBubble 组件结合出现问题 #6103

Closed puchenhui closed 1 year ago

puchenhui commented 1 year ago

Version of antd-mobile

5.18.0

Description

在页面中引入Popover组件和FloatingBubble 组件,但发现结合后 FloatingBubble 在右侧显示,点击后,Popover组件在左侧显示,代码如下:

const actions: Action[] = [
        { key: 'scan', text: '扫一扫' },
        { key: 'payment', icon: <HandPayCircleOutline />, text: '付钱/收钱' },
        { key: 'bus', icon: <TransportQRcodeOutline />, text: '乘车码' },
        { key: 'assistant', icon: <AntOutline />, text: '智能助理' },
    ]
        <Popover.Menu
                actions={actions.map(action => ({
                        ...action,
                        icon: null,
                    }))}
                  onAction={node => Toast.show(`选择了 ${node.text}`)}
                  placement='top-start'
                  trigger='click'
                  >
                    <FloatingBubble
                      axis='xy'
                      magnetic='x'
                      style={{
                            '--initial-position-bottom': '24px',
                            '--initial-position-right': '24px',
                            '--edge-distance': '24px',
                        }}
                    >
                        <AddOutline fontSize={32} />
                    </FloatingBubble
                </Popover.Menu>
zombieJ commented 1 year ago

提供一下在线重现哈~

github-actions[bot] commented 1 year ago

Hi, puchenhui.

Please provide a online reproduction so that we can help you troubleshoot the problem. You can create a demo by codesandbox or stackblitz.

我们需要你提供一个在线的重现实例,以便于我们帮你排查问题。你可以通过 codesandboxstackblitz 创建一个实例。

puchenhui commented 1 year ago

提供一下在线重现哈~

https://codesandbox.io/s/busy-engelbart-0btr46?file=/src/App.tsx 已提供

zombieJ commented 1 year ago

这么写,因为 悬浮元素是 fixed 布局,所以容器本身是没有 size 的哈: https://codesandbox.io/s/exciting-hofstadter-kwq78w?file=/src/App.tsx

puchenhui commented 1 year ago

这么写,因为 悬浮元素是 fixed 布局,所以容器本身是没有 size 的哈: https://codesandbox.io/s/exciting-hofstadter-kwq78w?file=/src/App.tsx

好的,谢谢,我明天了试一下。