Vue获取分发内容的宽度

来源:互联网 发布:飞科剃须刀怎么样 知乎 编辑:程序博客网 时间:2024/05/22 05:00
Vue在需要获取分发内容的宽度(内容不换行的情况下)

子组件有默认的内容(即在父组件没有分发内容时也会有内容)例:

<span id="detial">  <slot>这里是子组件默认内容</slot></span>

<father>   <son>父组件分发到子组件的内容</son></father>
直接在子组件mounted函数中获取时获取不到detial正确的值:

document.getElementById("detial").offsetWidth
此时的offsetWidth为父组件分发内容到子组件之前子组件渲染的内容的宽

若获取父组件分发内容到子组件渲染后的宽度值

this.$nextTick(function(){    
   document.getElementById("detial").offsetWidth;
})


即在渲染完成之后再获取分发槽内容宽度,,此时是正确的宽度