uniapp Vue获取节点信息并封装成方法使用，NVue获取节点信息

本文链接：https://blog.youkuaiyun.com/m0_66939000/article/details/138211357

本文介绍了如何在Vue和NVue应用中使用SelectorQueryAPI获取单个、多个和循环节点的尺寸信息，包括getCreateSelectorQueryNode、getCreateSelectorQueryNodeAll和getCreateSelectorAllQueryNode方法，以及如何通过ref和原生插件获取特定节点的详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue

注：传值名称必须带标识符，比如：#info .info，如果类名有多个节点在使用，建议使用循环节点信息方法，可以获取当前类名所有节点的信息，则获取自上而下的第一个类名节

我是v3 封装的 mixin，从 mixin 来引入使用

	let {
		getCreateSelectorQueryNode, // 获取单个节点信息
        getCreateSelectorQueryNodeAll, // 获取多个节点信息
        getCreateSelectorAllQueryNode // 获取循环节点信息
	} = mixin();

获取单个节点信息

const getCreateSelectorQueryNode = async (name) => { // 获取单个节点
		return new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery().in(this);
			query.select(name).boundingClientRect();

			query.exec((res) => {
				if (res && res[0]) {
					resolve(res[0]);
				} else {
					reject(new Error('Element not found'));
				}
			});
		})
	};

在页面中使用单个节点信息方法

getCreateSelectorQueryNode('#id').then(res => { 
	console.log(res);
 })

获取多个节点信息

const getCreateSelectorQueryNodeAll = async (classSelectors = []) => { // 获取多个节点
		return new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery().in(this);
			classSelectors.forEach((selector) => {
				query.select(selector).boundingClientRect();
			});
			query.exec((res) => {
				if (res && res[0]) {
					resolve(res);
				} else {
					reject(new Error('Element not found'));
				}
			});
		});
	};

在页面中使用多个节点信息方法

getCreateSelectorQueryNodeAll(['#id','.class']).then(res => { 
    console.log(res); // 返回的是数组格式，下标信息对应着传参下标节点
 })

获取循环节点信息

const getCreateSelectorAllQueryNode = async (name) => { // 获取循环项节点
		return new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery().in(this);
			query.selectAll(name).boundingClientRect();
			query.exec((res) => {
				if (res && res[0]) {
					resolve(res[0]);
				} else {
					reject(new Error('Element not found'));
				}
			});
		})
	};

在页面中使用循环节点信息方法

getCreateSelectorAllQueryNode('.class').then(res => { // 使用类名获取多个当前类名节点的信息
    console.log(res); // 返回的是数组格式，下标信息对应着类名自上而下顺序
 })

NVue

获取单个节点的信息

getComponentRect(节点，回调函数)

ref，要获取外框的那个节点。
callback，异步方法，通过回调返回信息。

const dom = uni.requireNativePlugin('dom') // 引入原生插件
dom.getComponentRect(this.$refs.box, res => {
	 console.log(res);
 })