jd-opensource / jd-opensource/taro-ui
AtModal和AtFloatLayout在同一个页面中,显示AtFloatLayout后AtModal也错误的显示出来
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 740
- PR merge metrics
- No merged PRs in 30d
Description
### 相关平台
H5
### 复现仓库
[https://github.com/huangcs427/taro_test.git](https://github.com/huangcs427/taro_test.git)
**浏览器版本: Microsoft Edge 版本 113.0.1774.57 (正式版本) (64 位)**
**使用框架: React**
### 复现步骤
```jsx
import { Component, PropsWithChildren } from 'react'
import { View } from '@tarojs/components'
import { AtButton, AtFloatLayout, AtModal } from 'taro-ui'
import './index.less'
export default class Index extends Component {
state = {
isOpenedAtFloatLayout: false,
isOpenedAtModal: false
}
setIsOpenedAtFloatLayout = (val:boolean) => {
this.setState({
isOpenedAtFloatLayout: val
})
}
setIsOpenedAtModal = (val:boolean) => {
this.setState({
isOpenedAtModal: val
})
}
componentDidMount () { }
componentWillUnmount () { }
componentDidShow () { }
componentDidHide() { }
render () {
return (
this.setIsOpenedAtModal(true)}>AtModal
this.setIsOpenedAtFloatLayout(true)}>AtFloatLayout
this.setIsOpenedAtFloatLayout(false)}>
这是内容区 随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写
this.setIsOpenedAtModal(false)}
onConfirm={()=>this.setIsOpenedAtModal(true)}
content='欢迎加入京东凹凸实验室
欢迎加入京东凹凸实验室'
/>
)
}
}
```
### 期望结果
AtFloatLayout和AtModal的显示互不影响
### 实际结果
先显示AtButton,再显示AtFloatLayout,AtFloatLayout也一并显示出来
### 环境信息
```
👽 Taro v3.6.8
Taro CLI 3.6.8 environment info:
System:
OS: Linux 5.15 Deepin 20.9 20.9
Shell: 5.0.3 - /bin/bash
Binaries:
Node: 16.14.0 - ~/.config/nvm/versions/node/v16.14.0/bin/node
npm: 8.3.1 - ~/.config/nvm/versions/node/v16.14.0/bin/npm
npmPackages:
@tarojs/cli: 3.6.8 => 3.6.8
@tarojs/components: 3.6.8 => 3.6.8
@tarojs/helper: 3.6.8 => 3.6.8
@tarojs/plugin-framework-react: 3.6.8 => 3.6.8
@tarojs/plugin-platform-alipay: 3.6.8 => 3.6.8
@tarojs/plugin-platform-h5: 3.6.8 => 3.6.8
@tarojs/plugin-platform-jd: 3.6.8 => 3.6.8
@tarojs/plugin-platform-qq: 3.6.8 => 3.6.8
@tarojs/plugin-platform-swan: 3.6.8 => 3.6.8
@tarojs/plugin-platform-tt: 3.6.8 => 3.6.8
@tarojs/plugin-platform-weapp: 3.6.8 => 3.6.8
@tarojs/react: 3.6.8 => 3.6.8
@tarojs/runtime: 3.6.8 => 3.6.8
@tarojs/shared: 3.6.8 => 3.6.8
@tarojs/taro: 3.6.8 => 3.6.8
@tarojs/taro-loader: 3.6.8 => 3.6.8
@tarojs/webpack5-runner: 3.6.8 => 3.6.8
babel-preset-taro: 3.6.8 => 3.6.8
eslint-config-taro: 3.6.8 => 3.6.8
react: ^18.0.0 => 18.2.0
taro-ui: ^3.1.0-beta.2 => 3.1.0-beta.5
```
---
### 补充信息
官方新创建的项目,选了模板是Taro UI,未进行过其他修改,
Contributor guide
Assessment
This issue has not been assessed yet.