Vue的$refs获取和设置样式

  • A+
所属分类:js vue 前端

项目场景:

原来都是用的原生js直接修改dom来改变样式,今天看资讯中了解到在使用vue的过程中尽量避免使用原生js,因为原生js直接操作dom会造成过多的开销,应使用vue中的$refs操作虚拟dom来改变样式。废话不多说,直接上问题。


问题描述:

上面说到使用$refs来操作虚拟dom(这里提醒一下,refs后跟的属性值是标签中ref属性中的值),但是怎么操作呢?api是什么呢?完全没有头绪,博主就去面向百度编程了,结果,情况很不理想,大家的答案五花八门,且没有一个统一解决问题的办法。这里引入博主的简单示例和网上百度来的方法以及它们出现的错误。
以一个简单的view标签示例(这里不是微信开发工具,是HBuilderX,一款解决多端泛滥的神器,其语法结构是微信小程序和Vue),目的是点击后获取该标签的高度,以及改变它的高度。

Vue的$refs获取和设置样式

这是网上百度到的一个据称是获取this.$refs,button,style.height的方法
点击该标签元素后,前端报错页面展示图如下: Vue的$refs获取和设置样式

Vue的$refs获取和设置样式
意思是不能找到该标签下的height属性,且这种类似的答案在网上不只一个,至于其他答案的报错就不一一列举了。下面主要讲一下怎么解决这种问题。


原因分析:

刚刚分析到该标签下没有这种height这个属性,那么,又该怎么去获取和修改该标签高度呢?既然网上没有答案,那么我们就从该标签的返回值来分析一下,看下怎么获取和修改高度。
这里打印一下用$refs获取到view标签的所有属性。

console.log(this.$refs.button)

可以看到里面的属性如下:
Vue的$refs获取和设置样式
博主把所有的属性都看了一遍,这里节约时间,直接给大家点开$el看一下:
Vue的$refs获取和设置样式

这里可以看到view标签的高度找到了,也就是$el下的clientHeight属性,那么我们想要修改高度的话是不是直接修改这个值就可以了,我这里试了一下:

this.$refs.button.$el.clientHeight="40px"

发现了如下报错:
Vue的$refs获取和设置样式
说明该属性只可读,不能够改写,那怎么办?难道不能通过js修改标签的高度吗?当然可以修改,vue能如此盛行,自然是有这些基础功能的,这里我们继续观察,可以发现$el下还有一个属性叫style,这和样式的单词也刚好符合,那会不会就是修改它呢?这里我试了一下:

this.$refs.button.$el.style.height="40px"

可以看到,在点击该标签,也就是说在执行该代码前,$el下的style中的cssText为空字符
Vue的$refs获取和设置样式
当点击之后,发现cssText为:
Vue的$refs获取和设置样式
即我们刚刚修改的height写入到了cssText中,修改成功。


解决方案:

最后,在这里总结一下:
对于获取标签的高度属性:

this.$refs.button.$el.clientHeight

修改标签的高度属性:

this.$refs.button.$el.style.height="40px"

当然,具体问题具体分析,比如现在要修改id或者className,就需要去重新去找这个属性值和修改的方法。
这篇文章除了提供这类问题的解决方法,还有就是提供一种探索问题的精神,在哪里出错,就深入到内部去寻找产生错误的原因。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  0   博主  0

    • SkyTine 0

      你在后面写上单位px。。。