在 tabs组件中使用 DatePicker，会导致DatePicker显示异常

[zqianling]

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.6.11

平台

alipay

重现链接

暂无

重现步骤

<Tabs value={tab1value} onChange={(value) => { setTab1value(value) }} > <Tabs.TabPane title="Tab 1"> <DatePicker title={时间选择} type="datetime" startDate={dayjs().subtract(1, "years").toDate()} endDate={dayjs().toDate()} visible={visible} value={ dayjs() } /> </Tabs.TabPane> </Tabs>

期望的结果是什么？

时间选择抽屉不被覆盖

实际的结果是什么？

时间抽屉被覆盖，展示异常

环境信息

No response

其他补充信息

No response

[xiaoyatong]

能帮忙来一个图么，另外只有在alipay下有这个问题么~帮忙确认。

[Ahui4518]

我也出现了这种情况，在TabPane下面的组件只要有涉及到fixed布局的，位置都会错乱

[zqianling]

点击时间的时候抽屉已经展开的状态，但是，没有显示出来。如果，不用Tabs.TabPane包裹，用三元表达式判断当前展示内容，就完好展示出来。

[ilk-1]

我在nutui-vue中提了pr，因为它的tab是通过transform进行设置的，而当fixed的祖先存在transform时，他就不再以视口为锚点，而是以这个transform的元素进行锚点，因此会出现某些奇怪的bug https://github.com/jdf2e/nutui/pull/3130 vue复现仓库：https://stackblitz.com/edit/vitejs-vite-sty4eq

[ilk-1]

这是使用react复现的地址，和nutui的一模一样

[ilk-1]

给nut-tabpane增加一个transform: translate(0)就可以解决

[zqianling]

我试了你的方案，貌似多个tab的时候，在钉钉小程序下还是存在问题

[ilk-1]

嘶，那就不清楚了，小程序调试太麻烦了

[zqianling]

因为他的tabs使用的 transform: translate3d(-100%, 0, 0); 导致的，pop组件不是跟着tab.item内容走的，它是始终在起点， transform: translate3d(0, 0, 0); ，所以，切换tab的时候，在该tab下打开DatePicker，其实是打开了，只不过在transform: translate3d(0, 0, 0)的位置，不是在该tab下比如translate3d(-200%, 0, 0)位置，所以，看不到

[TSjianjiao]

就是tab设置了transform的原因，导致fix定位相对于的是tab而不是页面。

   // DatePicker给popup设置挂载节点
    pickerProps: {
          popupProps: {
            portal: () => {
              // 指定一个节点挂载
              return document.getElementById('abc')
            },
          },
        },