Uni-app中获取元素宽度高度的方法及注意事项
Uni-app中获取元素宽度高度的方法及注意事项
注意：<view>组件、v-for循环创建的元素不适合本文内容 注意：<view>组件、v-for循环创建的元素不适合本文内容 注意：<view>组件、v-for循环创建的元素不适合本文内容
1. 放弃传统dom操作节点的方法
Vue框架设计的初衷即是想摒弃传统的JS操作DOM的繁琐操作，因此极不建议在Vue框架下采用DOM节点获取元素位置的方案，当然如果想在传统Vue单文件项目中操作DOM节点也是允许的，在script元素内使用即可。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="写入VueJS路径"></script>
<style></style>
<head>
<body>
<div id="app"></div>
<script>
var vm = ({
el:"#app",
data:{
}
})
//下面即可写入自己的js脚本
var width = document.getElementById(app).clientWidth; //使用DOM获取id=app的元素宽度
</script>
</body>
当项目需要将DOM获得的数据与Vue的数据进行交互时，我们也会选择将DOM操作写在Vue的方法内，这样做也没有问题，但是对于Uni-app项目而言，一旦自定义的组件数目较多，这种操作DOM的方法就会暴露弊端：页面DOM的name、id等参数要进行全局规划，在写一个组件时还要兼顾其他所有组件的定义，这就给开发造成了一定的困扰。
2. ref属性的引入与元素宽高的获取
Vue为用户提供了ref属性，方便用户获取当前组件内的元素节点：
<template>
<view>
<div ref="innerbox" @click="xxfun"></box>
</view>
</template>
<script>
export default{
name:"xxx",
data:()=>{
},
method:{
xxfun:function(){
//获取div元素
let div = this.$refs.innerbox;
}
}
}
</script>
<style>
</style>
获得div元素后需要注意获取宽高的方法是因元素类型而异，需要先将改元素打印在控制台观察。（以下测试都经由Uni-app框架）
1）this.$refs.名字.$el.offsetWidth
以<view ref="viewref"></view>为例，通过
console.log(this.$refs.viewref)
将元素打印在控制台，如图： 这是一个被Vue封装的组件，对于输出是这种类型的组件，其元素宽高不可以用传统认知的clientWidth等获取，而是要使用this.$refs.名字.$el.offsetWidth获取。
2）this.$refs.名字.clientWidth
以<div ref="divref"></div>为例，通过
console.log(this.$refs.divref)
将元素打印在控制台，如图： 这是一个被原生的html组件，对于输出是这种类型的组件，其元素宽高只可以使用clientWidth等获取，如果使用上面的$el则会报错。
3. 总结
1.对于标准html元素，诸如div、img等，在uniapp中获取元素参数使用this.$refs.名字.clientWidth；
2.对于Uniapp自己封装的元素，诸如view、image等，在uniapp中获取元素参数则可以使用this.$refs.名字.$el.offsetWidth。
