jd-opensource / jd-opensource/taro-ui

AtModal和AtFloatLayout在同一个页面中,显示AtFloatLayout后AtModal也错误的显示出来

Open
#1,659 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.