boundingClientRect当出现嵌套同一组件,获取到的尺寸信息不准确
- 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的时候拿到的高度

// 加了style 后 拿到的高度

**系统信息:**
- 发行平台: [如 微信小程序、H5平台、5+ App等]
- 操作系统 [如 iOS 12.1.2、Android 7.0]
- HBuilderX版本 [如使用HBuilderX,则需提供 HBuilderX 版本号]
- uni-app版本 [如使用Vue-cli创建/运行项目,则提供`npm run info`的运行结果]
- 设备信息 [如 iPhone8 Plus]
**补充信息**
[可选]
[根据你的分析,出现这个问题的原因可能在哪里?]
Contributor guide
Assessment
This issue has not been assessed yet.