TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

Vue元素动态计算技巧

zyz
2021-04-06
/
0 评论
/
99 阅读
/
正在检测是否收录...
04/06

一、概述

在项目中,经常也都会遇到宽度或高度需要动态计算的。即当获取到数据之后,等待数据渲染完成,接着就需要动态设置外层盒子的宽度或高度来达到预期效果。而添加设置的时候,这就会遇到各种问题。

二、元素的获取

在Vue中想要获取到页面中某个元素或组件,怎么办?

通过vm.$refs对象,就可以获取到持有注册过 ref 特性 的所有 DOM 元素和组件实例。

# 元素定义,需要添加上ref属性
<div class="box" ref='scollView'></div>


# 元素的获取
var oBox = this.$refs.scollView

三、组件中元素获取

如果页面直接是一个DOM元素,因为获取到可以直接操作。

但要是获取到是一个组件时,如何进行操作呢?

这里少不了vm.$el,是获取Vue 实例使用的根 DOM 元素。

# 这里是for的操作,所以有多个组件
<UserAppraiseView ref='userAppraise' v-for='(item, index) in goodsDetail.appraise.list' :key='index' :appraise='item'></UserAppraiseView>

# this.$refs.userAppraise是数组,因为有多个
# 需要获取到组件中的 根DOM元素,才能进行JS系列操作
var oUserAppraise = this.$refs.userAppraise[0].$el 

四、如何保证DOM渲染完成

正常情况下,DOM元素渲染完成后,才能获取到某个元素,或者是设置某个元素,该如何保证呢?

vm.$nextTick( [callback] )将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。【确保DOM已经渲染完成之后,再去做一些事情】

# 当渲染完成后,计算外层盒子的大小
this.$nextTick(function(){
    ...
})

五、项目中的使用

  • 描述
    该商品评价中,评价个数是不确定的,而这里需要设置外层盒子的大小,以保证盒子能够装的下所有用户的评价信息。

  • 代码示例

    # template
    <div class="box" ref='scollView'>
    <UserAppraiseView ref='userAppraise' v-for='(item, index) in goodsDetail.appraise.list' :key='index' :appraise='item'></UserAppraiseView>
    </div>
    
    
    # script
    beforeUpdate() {    // 钩子函数
    this.$nextTick(function(){
        // vm.$el 组件中的 根DOM元素
        var userAppraise = this.$refs.userAppraise[0].$el 
    
        // 元素宽度
        var width = userAppraise.offsetWidth
    
        // element.style 内联样式
        // getComputedStyle 包括内联样式、嵌入样式、外部样式
        var computedStyle = getComputedStyle(userAppraise, null)
    
        // 右间距
        var marginR = parseInt(computedStyle.marginRight)
    
        // 动态计算
    var temp = this.goodsDetail.appraise.list.length * (width + marginR * 2) + 'px'
    
        // 设置
        this.$refs.scollView.style.width = temp
            })
        },
赞(0)
评论 (0)