dcloudio / dcloudio/uni-app

boundingClientRect当出现嵌套同一组件,获取到的尺寸信息不准确

Open
#3,385 1 comment 0 reactions 1 assignee Claimed by @Otto-J View on GitHub
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

**问题描述**
[问题描述:尽可能简洁清晰地把问题描述清楚]
当我想自实现收缩框的动画,但是对于统一个组件进行了自调的嵌套,导致获取的height 高度不准确;

**复现步骤**
[复现问题的步骤]
1. 启动 '...'
2. 点击 '....'
3. 查看

[或者可以直接贴源代码]
```typescript
// PreviewFormContainer





import {
Component,
computed,
defineComponent,
nextTick,
onMounted,
Ref,
ref,
} from 'vue'
import map2Coms from './coms/map'
import GridCom from './coms/layoutComs/GridCom.vue'

import CCollapse from './coms/externalComs/CCollapse/CCollapse.vue'

// gridCom 组件



import PreviewFormContainer from '../../PreviewFormContainer.vue'
defineProps(['element', 'data', 'index', 'models'])

// CCollapse 组件




标题








import {
computed,
ref,
getCurrentInstance,
onMounted,
nextTick,
defineComponent,
} from 'vue'

export default defineComponent({
name: 'CCollapse',
setup() {
const isOpen = ref(true)
const height = ref(0)
/* 唯一id */
const elId = ref(`Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`)

const onClick = () => {
isOpen.value = !isOpen.value
}

function getContentHeight(this: any) {
const views = uni.createSelectorQuery().in(this)
views
.select(`#${elId.value}`)
.boundingClientRect((data) => {
console.log('========', data.height)
height.value = data?.height as number
})
.exec()
}

const style = computed(() => {
if (isOpen.value) {
return {
height: `${height.value}px`,
}
} else {
return {}
}
})
onMounted(() => {
nextTick(() => {
getContentHeight()
})
})

return {
isOpen,
elId,
style,

onClick,
}
},
})

.c-collapse {
border-bottom: 1px solid #ebeef5;
font-size: 14px;
color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}
.c-collapse--title {
display: flex;
align-items: center;
justify-content: space-between;
line-height: 48px;
}
.c-collapse--title__txt {
color: inherit;
font-weight: normal;
}
.c-collapse--icon {
color: inherit;
transform-origin: center center;
transition: transform 0.2s ease-in-out;
&.c-collapse--icon__close {
transform: rotateZ(180deg);
}
}
.c-collapse--content {
transition: height 0.2s ease-in-out;
overflow: hidden;
}

```

**预期结果**
[使用简洁清晰的语言描述你希望生效的预期结果]
想通过boundingClientRect 获取真实的 height 的高度做动画,当我加了style 后 就拿不真实的内部节点的高度

**实际结果**
[这里请贴上你的报错截图或文字]
// 在未加入 style的时候拿到的高度
![image](https://user-images.githubusercontent.com/22167727/160560312-d2c8ea20-a58c-4263-a85a-2f7ddf72a76e.png)

// 加了style 后 拿到的高度
![image](https://user-images.githubusercontent.com/22167727/160560189-5031e858-2d41-4b6d-ae1a-04cc76dc22cb.png)

**系统信息:**
- 发行平台: [如 微信小程序、H5平台、5+ App等]
- 操作系统 [如 iOS 12.1.2、Android 7.0]
- HBuilderX版本 [如使用HBuilderX,则需提供 HBuilderX 版本号]
- uni-app版本 [如使用Vue-cli创建/运行项目,则提供`npm run info`的运行结果]
- 设备信息 [如 iPhone8 Plus]

**补充信息**
[可选]
[根据你的分析,出现这个问题的原因可能在哪里?]

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.