uniapp vue3 中获取nvue节点
时间: 2023-11-30 13:02:54 浏览: 167
uniapp 基于 vue3 开发的【验证码输入框】
在Uniapp Vue3中获取nvue节点可以使用`uni.createSelectorQuery()`方法来获取节点信息,这个方法可以获取到nvue节点的一些信息,如位置、大小等。
代码示例:
```vue
<template>
<view ref="nview" class="nview"></view>
</template>
<script>
export default {
mounted() {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this)
query.select('.nview').boundingClientRect(data => {
console.log(data)
}).exec()
})
}
}
</script>
```
在上面的代码中,我们在`<view>`标签中设置了一个`ref`属性,这样我们就可以在代码中引用这个nvue节点。在`mounted`钩子函数中,我们使用`this.$nextTick()`方法等待nvue节点渲染完成后再去获取节点信息。然后使用`uni.createSelectorQuery().in(this)`方法创建一个查询对象,并使用`query.select('.nview').boundingClientRect()`方法来获取nvue节点的信息。最后使用`query.exec()`方法执行查询操作。在回调函数中,我们可以获取到nvue节点的信息并进行处理。
阅读全文